Welcome to another episode of GUI Challenges, where I build interfaces my way and then I challenge you to do it your way, because with our creative minds combined we will find multiple ways to take over this world, I mean create interfaces and expand the diversity of our skills and in today's GUI challenge we're building transitions. This challenge is a little bit more about like masking and specifically masking with clip paths. So how do we get effects that sort of allow us to transition elements from one state to another with a kind of elegant, you know, cinematic type of transition.  Anyway, right, you're like revealing things and in some ways you can like reveal something and then as it comes back you can have a different item here. So there's like a two part transition where you're sort of like phase one out and then bring one in, which is kind of like what we do here. So we make trick go out and we make trick come in. Same thing with here. We have trick or treat, trick or treat, right, very on brand for Halloween I think. But yeah, we have trick or treat and these are kind of tricky in that they had to be stacked, right? So in order from one to transition to the other kind of seamlessly, they needed to exist in the same layer and I did this with grid and we'll check that out in a sec. That's essentially what we're working on today is these and then down here we have these square out and square in and then whatever we're going to do here and we're going to build those live. So before we do that, first we have to reveal what there's a mystery square in the center. We're going to have to figure out what that is here in a second and we're going to go look in the debugging corner. So let's go there and check out what we got. Clip path has very good support and there's really only one thing to think about it with clip path. So here I'm using the active class on these to do this transition. Here it is in Safari. So we saw it on iPad there. Here's Safari looking good. Safari on iOS. Excellent. Everything as we expect here just down on Android. Circle out, trick or treat, trick or treat. Very cool. Love the colors. And then look down here. We have reduced motion. Just sort of like instantly doing things, right? Circle out. Well, now it's out. Here's this one. It's out. Now it's in. This one transitions between trick or treat almost instantly. This one does do it instantly. There's a slight delay in this one, which I could take out so it's a little less flashy, but I don't know. I didn't, I didn't think that was too harmful there. So we have trick or treat down here.  There's like, ooh, ooh, we'll get into that one in a second. And then these down here don't do anything. So putting the transition styles behind reduced motion is how I did that. So here we just pop in here and look to see, well, this person is currently preferring reduced motion. So they're not going to see any transition styles down here. I'd have to change it to, well, let's just change it. We'll go here to system. We want the rendering. Rendering right here. Scroll down to, yeah, it's prefers reduced motion. It's currently set to reduce. We'll say no emulation. Now we get our emulation. Well, how we get our animations. And we can look down here. Ah, yes, prefers reduced motion. No preference, set a transition. So it's that easy to gate these things behind a user preference. There's how I did that there. I guess I'll just leave it now that it's there. And really, if I'm going to leave it, I can close this, which now we can get that sort of full view here into these effects. And then here it is in Firefox. And so one of the things I was mentioning earlier to note was that there's a performance issue with Clip Path. And really, it's kind of debatable whether it's not an issue. I've seen Clip Path perform really, really well on low end devices. But I've also seen it perform poorly. It kind of depends on how much it has to compete with, because it's generally not off the main thread. This is on the main thread. This is like a CPU based animation, unless you're in Safari, which I believe Safari has put this on the GPU. So they get really nice performance in their Clip Path animations, because the GPU is doing it. There is a Chrome effort to make this a GPU accelerated animation. It is, from what I can tell, a little stalled at the moment. But there's hope. There's hope that this animation could be GPU powered. And then you kind of unlock its potential. And maybe you can get more extreme with the way that you use it. I don't know. But anyway, that's the one thing to note about it. This is generally a CPU animation. When we're talking about animations, usually someone has to say something like, we'll animate the transform or opacity. Everything else is sort of off limits. Clip Path is not included in that list. And it is something you should be thinking about, as you're kind of coming up with these animations using Clip Path. So OK, now that we've seen it work across all these browsers, also kind of cool here, I can tab into here. And since I made it focus centric, you can use focus, which is kind of cool. And here's our last one. Let's just reveal it. The one that's hiding in the center here is a link to ChromeTober. So the last episode on tooltips, we went to Design Sember. And today, we're going to go to ChromeTober on web.dev. Scroll, scroll. And here's a project our team came up with to showcase container queries and scrolling to animations. And it's called ChromeTober. And you can go through this animation. So as I scroll, see how the scroll bar is moving down here. We're causing an animation on the page. And we're animating elements in and out based on their presence inside of the viewport. Super cool stuff. I really think you should check out this project that we made. It's really fun. Lots of little Easter eggs in here. And of course, here's the team that built it. And kind of neat. So anyway, that's just like a small plug. And it was an exciting piece of art to throw into the center here. So that's the ChromeTober 2022 book. Go ahead and check out that project. Just like we did design somewhere last year, we did ChromeTober this year. So we went on a spooky route instead of the Christmas cheer. And it's fun. I think it turned out really nice. So check out that project. OK, so what we're going to do next is we're going to go back into Canary in the big screen or Chrome. It doesn't really matter. Clip path is going to work right there. And we're going to edit some of those transitions. And then we're going to write some new ones from scratch. Let's go do that. Time to unearth how the clip path transitions are working. Get it? That was like a zombie joke. Maybe, I don't know. Anyway, all right. So here we have our container. And we have a box. And the box is what is transitioning the clip path. And the container is what's looking for hover. So right off the bat, it's critical that this happens. Because if the hover here was clip pathing itself, then as soon as it disappeared beyond my mouse, it would start to transition back. And then it would do that infinite thing that hover does. So what we're doing is we're looking for interaction on the parent and then transitioning a child. That way, the thing that you're hovering isn't being masked out an in of the mouse position. So anyway, kind of a small but important thing to note. And so if we look in here and we see our clip path, you can see that I've named some of my clip path variables here. So we have circle in. Well, let's click it and see these. We have circle in and circle out. And circle in is at 75% and circle out is at 0%. Let's change this right here and just see what happens. If I shrink it, I should start to see, yeah, look at that. We can see the things that are using it and they're transitioning to that space. So one of like a cool tip with clip path just in general, even if you're not animating it, but as if you go 50% in the circle, look at how it's a perfectly fit circle. You might be tempted to use border radius to do this border radius, some big number, maybe border radius 50% or whatever it is that you put in there, you could also just clip right there and do circle 50%. That's a cool tip. I like using that for circles all the time because I think it makes sense and look editing it is just so nice. But okay, so what we had though was 75% and if we look, it is perfectly the value or 70 perfectly the value, 70 is perfectly, oh no, look the corners look a little rounded there. So if we go 75%, we're ensuring that as we interact with this, it's gonna scale to the entirety of the viewport of this like particular element that we want to mask. So that's kind of a cool thing and look at how simple this syntax is. So if you're wondering like what it's like getting started with clip path, like let's look at our square down here and just like give it a quick little clip path here, we'll say clip path, circle, you know, 25%, boom. That's how easy it is to make clip paths and circles. Like that is cool stuff right there. So tuck that into your belt for like use cases and things that you can do with clip path and let's go look at the syntax for these ones here, the wipes. The wipes are using the, well here let's go to wipe in. We'll look at the different ones that's using insets. So we have a wipe in set here to like it's fully visible. See how there's no inset values at all and these all have inset values that sort of complementary sides. So this is top right, bottom left and we have wipe bottom is saying inset top 100%. Well here, let's just go check this out. So we'll just edit a clip path directly on this box. We'll set clip path here, we'll paste and I'm also gonna change these to percentages, percentages. And that way we can go edit them. So if I hit shift and down, I can see that we're un-pushing away from the top. So in this case, I'm pushing away from the top, top, top and it gives us this effect of wiping out towards the bottom of the box. I can also pop in here and start editing these and this one's pushing from the right, pushing from the bottom and pushing from the left.  That's what I call them, the wipe animation. Let's go back down to zeros here. And so the way that I just, I found all those custom properties is just by testing these things out. So I could tell that this one is gonna be a good one for that particular scenario. I'll set this back to 0%. This one, if it's 100%, looks like it's wiping out to the left. This one, if I edit it to 100%, it looks like it's wiping out to the top, right and to the right. And we'll just go look at those custom properties and named again because, well, it's much easier reasoning about these values if they're named applicably. So it's cool having these names. And then when we actually do the animations, also we'll get rid of that here. We can see this one's animating to an in position. Let's look at this one. This one, we'll make sure we're selecting the box and we'll make sure that we're hovering the element so that we can see the style that's being applied to the one here. And there it is. It's going from a wipe bottom position. So that's its default. And then as soon as we hover on the apparent element, we're going to give it a wipe in animation. And that's what gives it that, it restores the clip path to where there's pretty much no clip path. So we went from one that was pushed out to the bottom to one that is not there at all. And that is the basis of that trick. So let me pop out of here. All here and turn off this hover so we can get back to an interactive state. And let's look at how these ones worked like trick or treat here. So this one, we have a stack. So if we turn on our grid overlay, we can see that we have a single cell. See how there's only one box in here? And we can look at our definition of the grid. It says auto flow, which is required if you're using the shorthand here. One FR slash one FR. So it says single column, single row. They're in the same spot. And if we look at these children, they're saying I want to be in the first row and the first column and both of them are going to be defined like that. So they're competing for that space and the browser will stack them on top of each other, which gives us a good opportunity to edit their animations here so that they look like they're layered on top. And then we change the clip path. So let's look at this one here. It says wipe left. Let's change it to wipe top and we'll hover. And look, we get a different animation. It's so nice having the custom properties named because then I can sort of like articulate my transition really well. That's kind of cool. It has like a Mondrian box effect too. And I really like it. And if we do wipe from down there, look at that. That's cool stuff. Okay, well, so hopefully now you're looking at this syntax here going, that's not too spooky, right? It's just an inset. It's almost like if you're using the inset property, it's the same sort of stuff. You've got top right, bottom left. So if that's the sort of way that we're working with these and we're getting all these cool animation styles, what is square out and square in gonna be? So if we look at this one, right? These are undefined custom properties at the moment. Let's play. So we'll say clip path, inset. We'll say 20%, 20%, 20%, 20%. So essentially if we edit these values at the same time, well here, let's make a custom property, same time, 20%. And we'll pop into here and we'll say, oh, we could even do since this is just like margin and inset, it'll repeat. We can say var same time. There we go. And now if I edit this, we get all of them at the same time. Excellent. And really that's kind of irrelevant at this point. If we think about it, let's just put 20% inside of here. It gets repeated across all of them. So now look, that's pretty much the square out animation. Let's also do this transition, clip path, well, 0.5 seconds ease. Now as we play, we'll be able to see a transition. Okay, so if we want to go to square out, that's inset 50. So I could essentially say like square out is inset 50 and square in is gonna be inset zero, right? Okay, so now we can pop in here and say var square out. And there we go. So as we toggle this property, well, maybe not as we talk. Oh, cause it has to have something to find underneath it. So we'll say clip path var square in. Is this gonna work? Let's see. Now, what we want though, is this gonna work? Yeah. Okay, so there we go. So now it knows where it's coming from and where it's going to, and you can see that it's interpolating there really well. Okay, so if that's square out and square in, I can just take these custom properties and let's go into sublime and start working inside of there. Well, I'm gonna work inside of a sublime, but whatever text editor you have in here, let me switch over to there. All right, I've got the transitions here. Here is our square transitions document we're gonna be working with. I'm going to paste these into the root, since these are our named variables we just came up with and we have our circle in. Oh, these need to be squares. Let's call these square. Oh, look, those ones were square. Little preparatory mistake there. All right, so now we have square in box and what we want to do is set its initial clip path to var square out, right? So that by default, it's out when we hover, it's going to come in. So we'll take this, paste that there to square in and we want to transition this, but let's transition it if media, motion is okay. And we'll say transition clip path 0.5 seconds ease. We'll save and go back to our demo here and check if square in, square in works. So I thought we were doing that one, but I guess, yeah, here that makes sense. Okay, look, square in works, excellent. Okay, well, let's do square out. Square out, its default is not gonna be an out position. It's default is gonna be in, on hover, it's going to be out. And then we can also just copy our media query here with nesting and save that. Now we should have square out. So by default, it's in, right? That's gonna be no inset, no clip path. But when we hover, we apply a clip path, we transition it and we have no out square, square out, clip path in, on hover, clip path out. What did we miss here? Let's see.  So there you go, square out, square in, square out, square in, you saw how we got there. We're using the sort of shorthand of clip path, which is kind of like circle or getting a really, really similar effect. Now we need to work through this last one. What kind of effect do we wanna do here with like a square transition? So if we look at this, we've already got our grid. We already have stacked elements. Look, there's an emoji pumpkin behind here. And look, if I just click this and hit H on the keyboard, here's a kind of cool DevTools hotkey. If you hit H, you'll hide an element. Look, it applies a style and it says visual visibility hidden. You can hit H to unhide it there. So we can see that that's our transition. And how do we want these to move? Hmm, let's get an initial implementation in here. So here we are in our transitions. We got our square surprise, display grid. There's our grid layout. So all of the coloring is done in here. Now we need to sort of give these an animation. So each box is going to, do I still have that in here? Each box is going to need to transition. The second box, which is the one we currently see, let's give that one a clip path that puts it out. And we'll just use one of our variables for now. We'll use square out. Okay, and if I save and go back, look, now we're looking at the pumpkins because we've essentially masked out the one that's on top. And on hover, we're gonna wanna take the one that's currently straight, nth child two. This one needs to transition in and this one needs to transition out. And if we go back and check it out, look at that. We've got, oh, but it's not going both directions. It goes in but not out. So there's a definition missing somewhere here. And I think it's just a default one here for square in. And now, yes. So now it knows to go from and to. We've made it explicit. We can see that there. Looks great. For in terms of a lesson, I think that was pretty good though. We've got the ingredients are here. And if you wanna look at more clip path stuff, so if we go to look at more clip path opportunities, there are other functions that you can call. So look, there's circle, which is one we studied. We didn't study ellipse. Ellipses like a circle except the two different sides, they're not equally parallel on all sides. You'll get like an oval type shape. And that gives you an opportunity to create oval type shapes. We did go over inset and we didn't go over polygon. This is another really cool one. And polygon is a much more complex. You use two positions for each one. And it allows you to do like diamond shapes, really cool other type of shapes, angular things. It's a much more complex syntax, but you can go find a lot of these pre-made for you and you can kind of work with them. So I thought we would just show the essentials today, work through setting these things up with custom properties and introduce you to polygon a little bit, but I'm not gonna type one out right now. I think that would be a little tough to live code. All right, so that's essentially the GUI challenge today though is we learned about clip path. We learned about, you know, like its performance implications. We learned about how to set things up so that they can stack on top of each other and kind of get really cool interactions where one item is going out and another one is coming in. You can even think about like a form. You hit submit on a form and it goes out. And then it says, hi, we're submitting your stuff to the server or whatever. And then it transitions a new item back in and it says complete. So you can use these transitions to walk people through different guides. You can use it in terms of like state for when they submit things. There's all sorts of cool use cases for it. And the last thing I want to share is I do have a site called transition.style where I've essentially defined tons and tons of custom property clip paths with names so that you can easily test out. Look at this one does a circle into the top right. This one does a circle with a little bit of a hesitation in there, which is kind of cool. So here's the circle. These are in and then you can have out bottom right. So you have like in bottom right, out bottom right. You get kind of a cool effect over here. In bottom right is a lot cooler than let's do out circled top left. I don't know, the in ones look so much cooler. It's cause they like come from the center and then like burst out to the side. I don't know. Here's square ones, right? We just made that super simple set of styles, right? So all of these you can use. And what's funny too, you can see the little like copy icon here. And every time you click one of these it actually puts it into your clipboard. So here, if I open up a new tab and just paste it says keyframes, square out top, right? Clip paths, zero clip paths, right? So you can just come to the site and take these. And then let's check out some of the polygons cause these are kind of cool. So there's a diamond in, here's diamond out, in diamond with a hesitation, out diamond with a hesitation opposing corners, right? Going in and out. And then a new one that just got added is the cinematic one, which I really like because they always do that in movies. We're like, you'll be like, oh, this is cool. But then they're about to enter a dream and it goes like this. It's like super wide screen. Anyway, kind of a cool effect. So all sorts of really fun things can be done with clip path and transitions and animations or just transitioning them like we did today. I hope you enjoyed this GUI challenge on masking and clip paths and have a great Halloween. I'll see y'all on the next GUI challenge.


Thank you for getting into the spirit with some good yelling just then. So everyone who started, who opened up their laptop or turned on their phone and connected to the guest Wi-Fi network here in this room used DHCP at least once today. So this might be the talk in this block that resonates most with your computer or you. And it will certainly have the, it will have some cool stuff that you can use to find out more about these things your computers are always doing behind your back. So when do we use DHCP? We use it when we first start up on a new network and we're trying to figure out how we can participate in the network ourselves. So how do we send traffic? Like when we try to send network traffic, we usually want to address it to some remote host. So we have some destination that we know. And we also need to include some information on how that host should reply to us. So we need to know an address for ourselves that we can include as a source address in that traffic. When we start up on a new network, we don't know that yet. We don't know anything about the addressing scheme. We don't know who else is on the network. We need to find out some stuff. So as I mentioned, we need to set a unit, we need to find a source address, a Unicast IP address, so that we can get replies to any traffic that we send out. There's some more information that we need as well. We're going to need to know who can take our traffic out of the local network into the next hop. So for example, if I want to contact some computer that happens to live in the cloud, I can get away from my cloud and to the cloud via what we normally call a default gateway, so some machine that's happy to take your packets and send them off to where they really need to go. And we probably also need to know which set of numbers correspond to addresses and computers that are on our local network, our cloud, and which numbers correspond to computers that are in the cloud and need to get forwarded out to that default gateway. So how can we even find out this information? As I mentioned, we don't know what our source address is, so it's going to be really hard for us to ask anyone else who's on this local network, but the only people who know are on this local network. And we don't want to go and fill out a whole bunch of punch cards and try to file them into our computer to figure out how to get configuration information into it. So how are we going to ask the people who are on the local network with us for this information without an IP ourselves? So the solution, as you may have guessed from the talk title, is yelling! So there are special addresses that you can use in IP packets to deal with this situation. So the first thing that we're going to need to know is how to address an IP packet to everybody who can hear me. If we set the destination IP on an IPv4 network to all of the bits to one, which corresponds to <IP_ADDRESS> in the way that we normally write IPv4 addresses, this is specified as limited broadcast in the IPv4 RFC. And what that means is, okay, spray this packet to everyone who's listening, but don't forward it anywhere else. Just keep it here. So that sorts us out for our destination IP. The next thing that we need to know is, okay, what are we going to set our source to? And it turns out that setting all of the bits in an IPv4 address to zeroes when it's in the source field also has a special meaning. And that means, me, but I don't know who I am. If you want to reply to me, just send it to everybody and I'll hear it. I'm going to yell, you can yell back at me. And there's one more thing that we need, because when we're making packets that we want to send out on most networks, we need another layer of addressing below IPv4. So we need to also be able to address these packets on the Ethernet level. And in Ethernet, our source is always known. Each piece of Ethernet hardware that we get has a number associated that's baked into it. So we can say, okay, my network card, what's your source address? Okay, I'll use that. And Ethernet also has a broadcast address where if you set all the bits to ones, in this case it's six bytes, that says, okay, send it to everyone and Ethernet won't forward it, it'll just keep it on the local network. So that's great. So the way that we're going to yell is we're going to address our packet with an Ethernet header that says from my address, which I know what it is, to everybody, and on the IPv4 layer, just me, just yell back, okay, holla back. So we can use this to bootstrap a process by which we can discover how not to yell so much. And the process by which we discover how not to yell so much and be better network citizens is called DHCP. It's for dynamic host configuration protocol. And we usually call the configurations that we get through DHCP leases because they're time limited. And the basic idea is yell loud enough and somebody will help you. So DHCP works over UDP, which is a datagram protocol that's not connection-based. So we're going to just send individual packets and if someone hears them, they'll reply. Our client broadcast will go out on one port, broadcast from something that hears our traffic and wants to respond will go out on another port and then the client will hear it. There are a couple more considerations that we need to have for these conversations where everyone is yelling and there's no real conception baked into the addressing on the IP level or the Ethernet level of who's involved in this conversation. So we need to tag each message with a transaction ID so that we know if a whole bunch of people are yelling, which bits of conversation correspond with one another. And we also need to tag every message with a message type so that we know where we are in the process of trying to figure out how to stop yelling so much. I'll walk you through the usual message exchange. It's two pairs of messages. So it's important for us to keep track of where we are in that exchange so that we don't reply inappropriately and then have to keep yelling. So if I'm a client and I just came up on a network, the first thing I'm going to send is what's called a DHCP Discover message. And I've summarized it in plain English here. So we're going to pick a random transaction ID. That one doesn't look very random. It's random enough. It's good. It's fine. So what we're going to say is, hi, I'm XID 12345678. I'm discovering, please help me. Please give me an IP. And I also need a default gateway. And I need some DNS servers. And hopefully, someone hears me. And what they're going to say is, OK. Hi, this message is for XID 12345678. I'm a DHCP server. Here's my IP. I'm going to give you this IP address. Here's the network subnet. Here's the default gateway. Here's some DNS servers. You can use this for some number of seconds if you like it. And the client receives that. And it says, it looks at it and goes, OK. Hi, this is XID 12345678. I really like this IP address. It came from this server with this IP. Thanks. I'd like to request that I use it. And also the subnet that you told me, and the gateway, and the DNS servers. And the server hears that. And this hopefully corresponds with what it gave the client originally. And there hasn't been any additional traffic between that. And so it says, it looks at it and it's like, all right. That seems very reasonable. Hi, this message is for XID 12345678. I'm a DHCP server. Here's my IP. I acknowledge that you have that IP address. You can have it for only so long. Oh, and please use the subnet and the gateway and the DNS servers that I mentioned to you before. And then we don't need to yell anymore. So our computers are yelling right now. And if you know how to listen, you can hear them. And the trick to listening is a program that you might have heard of called TCP dump. So if I run TCP dump and I say, please give me a nice ASCII summary of all of the traffic that you see. I want it to be moderately verbose. Show me the ethernet headers. Don't reverse resolve any numbers into names. And I want to listen on my wireless interface. And please give me all of the traffic on UDP port 67 or UDP port 68. So if someone asks for a DHCP lease right now, I'll hear it. But since I didn't warn you that there would be audience participation, I'll have my laptop do it itself. So when I run that command, I can see the output of all of my yelling. And you can tell that I wasn't lying to you. Here's my ethernet source address in the first packet that I send out, which is going to the ethernet broadcast address. My source IP of all zeros, my destination IP of all ones. My message type, which is DHCP discover right here. And this list of parameter requests, which I kind of glossed over in the English explanation, but there's a way in DHCP where you can say, these are the things that I want you to tell me about where I am and how I should operate on this network. So in this case, the DHCP server that happens to be operating on app Nexus guest is giving us some useful information. Some of the stuff was in the summary that I gave you, like the subnet mask. There's some more stuff like, here's the time zone that you're in, which if you, like me, came from a different time zone, your computer might find to be useful. Or you might want your computer not to honor that at all. You might want to say, I want to know what time it is back home. I don't care what time it is here. Which gets at an issue with DHCP that I'll talk a little bit more about later. It's also giving us some useful things like the default gateway, as I mentioned before. And some other options that TCP don't think that we think are interesting. I would argue that all DHCP options are interesting. All 255 of them. Although I will admit that some are more interesting than others. If we follow the state space, if we follow the packets we see the message exchange, just as I described it, with some interleaved packets from other people, actually. Because it's yelling. So if someone else happens to be yelling while I'm yelling, I get both my traffic in theirs. And they're distinguished only by the different transaction IDs that are included in the messages. So you can see that this one right here is different from this one right here, which is why we don't get confused. So OK, Mindy, that's cool. You showed TCP dump, whatever. I can buy a zine and learn to be a wizard, too. Some DHCP options that I think are particularly interesting. Of course, one of them is NTP servers. So Joel gave a really great talk yesterday on NTP and why it's important. And why you might not want to just trust any arbitrary NTP server that some random person who's yelling in a public place tells you to use. One of the sort of threat models that Joel discussed is important in the context of the next DHCP option on this slide, which is Web Proxy Autodiscovery. That's DHCP option 252, and it's the best one. So Web Proxy Autodiscovery is a method by which a browser can try to figure out, OK, maybe I should be using a proxy on this network. Like maybe I should forward all of my web traffic through somewhere. But how can I find out where? What's really complicated? What should I do? I know. I'll include it in this public message that I broadcast to everyone to tell me how I should operate on the network. And they'll give me a link to somewhere that I can go and download a proxy definition. And then I'll treat that as if it's an explicit proxy that I put into my web browser. A fun thing about that threat model is that is actually a really nice way to break TLS, along with a bad NTP server, which can cause you to not know what time it is. This is basically a really good way to completely break the entire security model of the browser. So be careful out there. There are some other things that can go wrong. So in the example that I gave you, everything went really well. Everybody was really happy with all the messages that they got. There were no problems. But there is another bit of yelling that you can get, which often happens after the first exchange of messages where the client says, give me some information. And the server says, here's some information. The client says, OK, can I use this information? And the server says, no. Because it may have already given that IP away to someone else. So what we can do in that case is just restart. The client will usually restart the whole process. There's another thing that can go wrong when nobody's listening. When you yell and there's just nobody there, like you're all alone on the network. Yeah, right? It's really sad. And the way that you usually find out that this has happened is you're like, oh man, why don't I have any internet, like the Wi-Fi connected, but like nothing's happening?   It looks like this. And it means that you're going to be sad. And you can actually cause everyone else's laptop to do this by just yelling, no, as odd as you want to, and pretending to be a server. This is in addition to broadcasting an emoji in an MDNS request, this is a really good way to have the Starbucks network to yourself. So in DHCP, yelling is common, but shushing is rare. Most networks, DHCP is unbelievably common, like you'll connect to it everywhere. And most of the networks that we connect to that use DHCP don't have someone who's assigned to monitor them or make sure that no one's yelling random garbage in them. So if you go to any random public network and decide that you want to serve your own DHCP leases, nobody's going to stop you. In corporate environments where there's actually some kind of access control and people who get paid to monitor these kinds of things and deal with false positives, the situation is different. But most of the situations that I personally deal with aren't like that. I think the last time I was on a controlled corporate network of any kind was like three years ago. So I have a little bit of time, I think, for, OK. All right. So if you want to run your own DHCP server, there's a great program called DNSmask. I was going to give you a quick demo. But it's probably not a great idea because you probably don't want to get a DHCP lease from me. Simone gave me this badge that said, playfully evil. And that's a warning. If you want a cool DHCP lease, come up to me later. I'll give you one.  Thanks for your attention.


Think again as we have before about the sorts of assumptions that you're going to make. So if you're going to use this equation then knowing that we are expecting that we're going to get a An increase in temperature from an exothermic reaction. That's what we're going to be measuring about this We're going to have to look at the specific heat of water The products will be will include a salt in there. So that won't be exactly accurate This is what we want you to think about when you're carrying out your experiments and looking at potential sources of error And where you might have any deviation between your empirical or experimental value and theoretical value, which I've given you here That's all we really want to do is just to set this one up for you Give you the opportunity in class to carry out a couple of different types of neutralization Reactions and to compare your results with the theoretical values. Good luck and thanks for watching


Hey, Michael. Hey, how's it going? It's going okay. I uh, I came into this like two minutes early And I noticed that the recording button is just always on like sitting here thinking like is Emily getting this this video of me and just posting it on the internet Mr. Julian dawdling on zoom for two minutes Going through some of the edits now that state of the art is separated by hyphens Who I will be back in a second. I'm just gonna pour myself a little bit more coffee. Not a problem Make sure to clock out Hey, Alex Can you actually hear Alex and Think you're on mute. Oh There you go Hey, Alex, I'm like we're gonna need a Higher definition camera so that we can further evaluate the shelf behind you for what's on their book wise and and board game wise, of course Oh, I see you have terror mystica down in the far right. That's a good one. I guess this is This is it. I can't hear you. I'm you do now Whoops. No, I'm you to myself. Oops. Sorry about that. Um, yeah, no, uh, yeah terror mystica is a good one That's one of my favorites. Yeah The successor is is better. Oh, yeah, yeah, I haven't been able to find it in stock anymore Project it's literally the name of our our Wi-Fi at our household. My wife and I love it like we played it too much Anyway, okay enough with with CNCF board game working group and Back, I'll just go ahead and share my screen. We'll start going through edits This is the last week. Am I right on this? Alex, this is the final week. Yeah, and therefore Yeah This is it. I believe cool. Okay. I figured that's why Cole went through and I don't know if you've seen it's like Uh, there's there's many many many gram radical. Yeah, I learned What's hyphenate I do not Is it okay? Can I contest this very first comment is high profile really hyphenated? Can I really can I just Google that and just be like, yeah, look, I had to do it for state of the art I was like, no, there's no way Okay, so high profile No, okay, high profile high is oh no My life is shattered. I Mean, I'm okay with that and Alex your comment The He was deleting it and I didn't realize Yeah, he literally wouldn't hyphenated a bunch of stuff, so Yeah Things that I guess he got out of his dictionary at the source. All right Other parts of the stock we use a space instead of a height for key rotation. Yeah, I never is key rotation hyphenated Don't tell me that one Google doesn't think it is. I don't think it is it wouldn't make sense Yeah, no, no, not at all. Nope. Sorry. Sorry cold X We're just checking the SEO right like Maybe we need to check in camera dictionary or something yeah, but not you're you're in the UK Please please tell us about the correct English. We need that It's not ours either all right It's a further hard these materials that is suggested that source materials and I have fun. Sure. Yeah That's that comment stays for now Okay Supplies chain security is a developing over NASA. I love the use of the word NASA. It's so good We're existing information is often focused on singular independent. I'm okay with that. I mean, I think it's I think this is is a little bit too Yeah You wouldn't know that this refers to supply chain security So I I can I can buy coals change And so you Alex Alex it could you have the ability to just if you want if you see something that Cole says like that Especially grammatical things or clarity sort of stuff. Why don't we just accept them? I? Actually don't have the ability to accept anymore. I'm not on the educators list. So Can I just change that for you? So Alex are you agreeing that that needs to be deleted Yes. Yeah, I'm saying I think we should just drop that I do kind of then wonder about the The the ominous a more holistic approach is needed comment. I mean I Think that's the kind of summary of the entire paper, but I'm good with it. Yeah, I guess it says that right after That's the paper. It's a holistic approach to software supply chain security keen and with a Additionally anyone with it with a with an interest in supply chain security can further stock okay cool Think John's good John would be angry about the loss of the flowery language. I Did reach out to Mike and he said he said that he would He'd be on top of this so he said he'd have time middle of this week I'll reach out to him again, and if not, we'll just get well We'll just inside of our dealer generalize it for example some security breaches Yeah, let's take out might that's we don't want to do say might The entire Gaining access yep gaining over getting sure additional For another yeah, yep. Yep greed Alex that's a great space Mm-hmm. Mm-hmm additional other threat Excellent. All right. This is recent Build really to continuous integration continuous delivery step should all be automated through a pipeline. Oh, by the way, John is gonna join here in a minute He's just wrangling Hey Tim, I didn't see you join snuck in there Hey This recommendation feels like a summary of much of the rest of the paper beyond source code section Do we need this here? I do agree and I think we we said this to Yeah, yeah, I mean the entire thing is about pipeline defined as code. So yeah, I I want a hundred percent agree Personally, I think we could we could drop this recommendation because we're gonna right talk about this in so many other ways But and it's brought up in the introduction. I mean, it's literally highlighted if you didn't read anything Yeah, no, and it has nothing to do with source code Why is it in this first code section? I I 100% agree. I don't know what this is. I Almost feels like these are separate comments, I Think that that is Cole assuming we're keeping that recommendation saying it shouldn't just be for high Everybody should be automating and then sure. I think Emily was just responding to Cole. So Two questions, I guess that we have there with it one is are we keeping this one and the second is if we keep it Do we change the the No, I mean I'm gonna recommend to delete it Uh, just just real quick. So The reason why I had written that and I maybe put it in the wrong spot there was Emily said it wasn't clear that Whether or not we were making an actual recommendation to automate all steps as part of the build And making sure that that was clear to folks God damn it. No, I know it's you wrote it. I Mean that I would delete it. I'm just kidding. No, no, no, no, no to be clear Like I might not have put that in the right place, but if you go back in the slack a little bit One of I do remember this from last this was last week, right? You you wrote it like partially on the call Yeah, yeah, where where Emily was just essentially saying that she felt that and I sort of agreed Where the idea is we should be definitely recommending that all steps as part of a build should be Automated outside of like any manual sign-offs code reviews those sorts of things You know the thing that we wanted to sort of if the if you wanted a specific example that she called out was We don't want to do Manual hash validation like somebody going and saying yep this checks some relates to that one. Yeah, that's good We want to make sure that all that sort of stuff is automated Yeah, the only thing is that that goes above all the sections like it doesn't it doesn't fit into source code, right? That's that's kind of my I think that's what we're saying here Mike I totally agree. I totally agree. And I think that Emily has a good point But where does that go? If you all are Look and see if I can find a better spot for it. I feel like we Get close to this to saying exactly this in the introduction Maybe we need to spell it out more and then we definitely have some other places where we get close to it And maybe need to spell it out more. So let me see if I can find a better spot for it and I'll move it and then we can Somebody can sign off on where I've moved it to Okay, but I won't waste the rest of our time on this call trying to find that spot She did a footnote fix perfect. I think she's fixed this more or less I think they're still kind of redundant, but I think it works. So Is and not is not considered except for contributions of that potential cause creators are advised Okay, okay. I'll take it. This is similar. This is similar to like the code owners use of the code owners project or Which is I think further down, right? Yeah Yeah to find individuals. It's this. Yeah, that's what you're saying Yeah, the exact same. It's just Yeah, maybe it's more granular. I'm not sure All right And footnote cool, I think I'll take that you got a good LG TM from Cole there Author party artifacts open-source Libraries and any other dependencies should be verified as part of the continuous integration pipeline. Just don't go check something. Yep. Yeah, I can agree anybody Nope All right now more grammar policing with Cole a Generated sbom provides that. Yeah, that's fine. I think speaking In the present rather than mm-hmm. Yeah, that's fine can To ensure ooh, okay Before allowing software dependencies into the system, they should be scanned and evaluated to ensure the level of the vulnerabilities they bring Well, that's an interesting one. I'm gonna give the floor to Vinod Level of vulnerabilities is a question. We do know that there are cases where you can have contextual Levels of vulnerabilities, right? You can have no vulnerabilities that you're accepting in your environment doesn't make sense Even without the word level of and and I'm just kidding putting Vinod on the spot Tim Mike any Alex. Do you have any? So he's asking to remove the level of vulnerability Yeah, essentially say ensure the vulnerabilities themselves are within risk limits not the level of as if there is like a threshold which I think In some cases there is a threshold of vulnerabilities that you can allow. I mean I mean, I think it sounds like saying Basically the same thing with fewer words Our abilities bring in our within the risk limits is the same thing as saying the level of them is acceptable That that that makes sense. That's fine. That's that's I'm not I'm maybe reading into it too much Delete there's a bunch of these where I just moved the link from the text down here. Yeah, got it. Cool. I see it Let's see. I didn't actually take a minute to look at this Oh, that looks good You can kind of see it makes it makes it significantly clearer. Good job Emily. I Would never do that my the letters would run off the page. Are we just gonna ignore Justin Cormack's? Oh, I guess Cole got to it. Oh Moving components, there you are. Yeah, I I'm staying out of this Yeah, I Yeah, I'm on the thought that if it doesn't need to be there it shouldn't be there And there's threats that we don't know about things and if they're not there, we don't have to worry about those threats Right Yeah, that that was I'll also my line and that is a hill.  Yeah, I think I think the point to where we talk about the attack factor of automated attacking automated attacks mitigating that Makes it a Makes it valid Right, so we found it mitigates Automated attack the tax by removing components that are those automated attack rely on therefore it makes an effective control Okay, so how many people's responses does it take to overwrite one response one comment from Justin Kormack? I think I think everybody's kind of in unison here Well, there's this guy I think but when I read his comment, I wasn't sure that he was actually disagreeing with Yeah, and they do do that at the iron bank. I have I can show y'all a documentation About minimizing it and pulling stuff out. That's true Yeah, I mean, I I think From the arguments for the variety of voices here. I'm good with checking this and keeping it in Yeah, I think it can reopen if it just it's the last week I'm gonna say I'm just gonna put enough evidence Provided Statement will stay Sorry, Justin You'll receive the airplane all of a sudden Docker stops working for me The Docker have don't have this UBI concept You've been rate-limited That's fine awesome Alex. I see the links are going out of the footnote Call you missed our going over your grammar grammar fixings. Oh, I'm sorry Something got messed up in the dock and I think I made some changes that I didn't want to so I apologize if there's some issues No, it's it's fine so far. Everything's been good Especially ruining my life with high-profile All right, delete link. Yeah, this is all good Alex. If this is the bulk of this we're in a good place Okay, we have We have these two as well. Nobody's responded those I guess it's actually this week. So this is fresh Encrypt artifacts before distribution Might be worth laying out use cases where encryption of container images is likely to be relevant Standard practices for most containerized environments as to what's storing secrets in the image. Yep So whilst ensuring integrity is important confidential, you know image is less of a concern Yeah, so this is saying we are recommending in high security environments to client-side encrypt the actual image Is that the the debate up here? Yeah, does that do anything I Mean I kind of agree with them Yeah, it's a base image that doesn't have secrets and so why why does that matter? They don't I've never seen an image Encrypted I Don't know that it that gives you any sort of like a verification, right? If you want to hide the materials of the image Well, yeah, sure encrypt it, but does that increase your security? Yeah, and is it something you'd recommend to be a common practice? Probably not I Think if you want to verify it, right? You verify the hash of there or the shot of some of that image or artifact And then you know it's what you know it is encryption Is to keep it secret? Yeah Here if it's secret Does anybody know who originally wrote this assurance or know the tricks inside of Google Docs to see that it's that sounds like it may have come from I feel like I remember this being a Brand-in-lum edition, but I am not sure of that Okay From the Deode team did they have any use case? Oh Yeah So let's look at the art. Let's look at the language of it, right? The contents of the artifact can be protected by encrypted it So that doesn't increase security of it Did this ensure as the contents of the artifact remain confidential and transit at rest until it's consumed? Are we trying to write a paper about keeping things confidential? Right, right. This might be your your 100% correct This would be like if if confidentiality was your utmost concern This is certainly a recommendation, but are we doing you right? Are we talking about keeping everything as confidential as possible? I don't think so. No, that's extraneous and it's it's out of scope for this paper in my opinion Anybody on the call speak up in favor of keeping this in just gone We'll go ahead Only authorized. Yes. Yeah, we do because that this makes no sense in context. Is that correct? Right, it's not a lot of the viewing of use of or use of an artifact to be tied to a key held from particular distribution infrastructure At that point we have nothing in the encryption section, which means the entire section goes away mm-hmm Okay, I'm gonna make a comment then just a just to Man, I can't type this one. Yeah, we talk about we talk about signing a lot, right? We don't talk about encryption Okay We're back to Alex's link footnoting So rewarding to click the check mark. Thank you Alex. That was really fun the other day I'm glad you guys joined my twitch stream I think that you should give permission to Alex to I think so too. I Okay, okay And we're already down to the glossary. I know you had you set up Alex a separate message in the slack channel about the glossary Yeah, I summarized it here, but but basically I think that So there's a lot of gaps in the glossary most of these terms we either use once or not at all and I'm not really sure why we need to find them here My suggestion is just dump the glossary rather than waste time trying to finish it I'm 100% with you. Is it normal to have a glossary in a Tech paper like this unless it's for tool for Terms that exist nowhere else. Do our users have Google? They sure do Yeah, can we just put I mean Yeah Yeah, we got pretty good footnotes, I think and we expand things inside the paper And our end users have access to reference materials. I I agree and we don't need to define personas if you don't it If you can't effectively Recognize the personas that are part of the the software supply chain work probably not a good paper for you Yeah, I think it was a really good exercise to organize this paper, right? so Just literally all this does anybody see anything retribute like worth keeping in the software sources and software groups Alex. Hi yet again. I Think yeah software groups. I believe We had a discussion in the beginning like in a first party second party that party to make it to see if all people don't understand like You know, it's somebody Google it and it's again the SCM and I'll be the first party Right, right. I totally agree. I Is this something new we're defining software groups? Does this exist anywhere in literature? Maybe as an appendix Those exact terms are More important thing, are we gonna be setting down this is a are we gonna define this In this paper and then what's funny is we'll define it, but we won't reference it anywhere. Do we reference? Like we Explain about procuring and everything so that's why we decide to explain it a little bit more But I don't know it's the standard terms used or someone in the group define all these terms. So maybe Yeah We change into a footnote Yeah, we could just wait what if we just add it into the there is no other appendix items are there Nope, there's just a gloss for the the container one Should we do appendix to software groups? Yeah, I don't know what kind of header this is looks like title Yeah, it's good stuff. It seems like it is definition Right, so we need to definitely talk about it. All right. Let's get back up Do you think sources and groups I should keep? Yeah, yeah, I think so as well set them about the proper titles Get rid of that I also like course idea Alex Food not right like that that might help while reading this some of the terminologies, right? It's probably worth us checking whether or not we we actually reference them And should it be instead of software groups? Should it be software? software context software Doesn't matter I'm gonna mark that as resolved Alex is that good No, we still didn't get trying to join message in here in a second All right So can we recommend just for This all goes yeah Yeah, all right Let's just to cover ourselves look for the word glossary Make sure oh Let's pay for leverages several. Yeah, that's Oh, that's now in our appendix, right, right Oh Look no more reference to glossary there's no glossary anymore All right, okay So What's going on with this is this gonna become become its own separate document. Is that the idea? I think Alex or somebody mentioned to put it in the landscape or right, or I don't know who yeah the suggestion is To move so I put this in this other document that Emily has that is gonna turn into the the evaluation framework But the suggestion is to eventually merge it all into The cloud native security map That is already underway. Yeah, should I Call any to even look at these comments or do you think those should be considered as part of? that discussion and I think if you will remove it, I think it's better like a so let me move from this to the Best in suggestion for it, you know the container industry and things I have not spent any time looking at the appendix for this containers Alex I just looked at the hour or so ago. So that was my first time reading through this section care I don't want to read with you on the call. That's not fun Um, do you find it useful Cole? No, I find what useful the I'm sorry. That wasn't cold. That was Alex who was talking. I'm sorry Alex Do you find did you find reading this actually helpful? the the base container images Appendix, I think there's some material in here that we don't have in other places that probably will be useful to people So I think it's worth keeping the appendix Do we actually call out the appendix in the paper? For appendix C That's within that product. That's within that paper Tilt some techniques to harden these capabilities. See Should I specify this to be appendix section one container base images and that's it Mm-hmm. So really very few references to use the appendix All right, I'll spend a little bit of time going through appendix one and seeing and Alex I'll Click the checkmark a million times I might ask John to just give you the ability to go prove your changes It's just I trust your grammar there Anything else anybody sees let's see. I can try to give you you all back 25 minutes of your life Just want to clarify for it. So we are moving that table from this paper right like yeah, yeah Yeah, who's facilitating that I left it in there only because When I copied and pasted it over the comments didn't come with it So if any of those comments left in that table are things we want to deal with Someone needs to go those kind of an equivalent comment in the new document So somebody wants to just take a look at those and say oh, yeah This is still open for discussion and then make a note of that in the new document Then we can clear it out But I didn't want to I didn't want to delete it permanently and lose all those comments if they were still things that we cared about in those can we start a deadline for like End of day Monday for getting the comments out of here cleared and deleting this entire section I'll if you want I can slack I can I can ping everybody who has a comment the most recent cometer Alex, I mean You know, there's not that many people it looks like mostly Yeah, it looks like mostly Magnolil Logan is the only one who really needs to go in and Make sure they get ported over But not I'm gonna pin you as well because I think making sure this paper gets the goods put over correctly It's good Yeah, I don't know that's another That's kind of an Emily question the prior art I I assume I mean it's just like a references section ultimately Okay, I'll ping Emily and ask her as well in the in the channel What is this section referred to as by us? This is the open source tools and project Mac thing all right Cool in terms of Let's see Emily had a bunch of Items that need that need gone over Yeah shared responsibility existing corrections need resolved that regarding the automated assurance add moderate and close it Yeah, that's what we just talked about HQs Yep, we kind of tackled all those Yep, okay I Truly think getting through this Alex If we get through the appendix on containers and we make sure that it's relevant to the rest of the paper There's and Alex if you can if this this is probably the last of the actual meat and potatoes in the paper that needs to be satisfied I'm gonna go ahead and I'm gonna Go ahead and hit contain on this I'm gonna ping Mike ends are privately and just be like hey, can you check the can you do a review of the appendix? I mean what I don't see anything else for us to to work towards Do we need this as well? This needs to be satisfied Yeah Accept it sure awesome, okay Yeah, yeah, this is this is really close. I mean Cool, let's let's I'll try to get through the container appendix part today Everybody else 20 minutes back in your life I'll work via Emily and John in terms of if we need to have anything ad hoc and tell them but This is likely close to being pushed off That's pretty cool. Yeah, it's awesome Super exciting so Cool everybody. Thank you so much for all the work you've done Thank you for the reviewing anything you see see something say something just just put it in the dock We can still review comments. It's not published yet And thanks a bunch. Have a great weekend


For those of you traditional artists out there who are drawing and painting on paper still in this day and age You want to get into a digital drawing and want to get an electronic tablet for your computer I just wanted to say real quick. You do not need to buy a $2,000 Cintiq or even a $200 in Tuos You can get one of these old school Wacom bamboo tablets if you're wanting to simply learn how to use a tablet and See how it does for you and not spend a lot of money. This is the way to go Wacom is the biggest name in tablets. They make the best no question They don't even list bamboo tablets on their website anymore But you can still get them on eBay sometimes on Amazon. They're so inexpensive now That I have several of them that I keep as backups Although I think this is the one that I first bought back in 2009 I think this is still my first one although. I've gotten new Styluses a couple of times.  It works great for any other controls I have my keyboard sitting next to me. It's important that you get the model MTE 450 This is the model you're looking at right now It's very small very light. You can travel with it It has a four by six drawing surface What you may think is small at first, but I'm telling you it's not it's just fine If you've never used a tablet before you're probably thinking well, how can I draw? Something on the screen without looking down at the tablet Well think of it this way do when you play a video game Do you stare down at the controller the whole time? No, you look at the screen You quickly learn the feel of this space and that's why it's important for it to be small I know the impulse is to get one of those Cintiq displays where it's a giant display where you're drawing directly onto the surface of this giant touchscreen But I'm telling you your eyes are going to get really tired And I've seen artists use a Cintiq display the same way they use a piece of paper That they'll be hunched over it with their eyes Right next to the tablet and with the brightness of that screen They are burning their eyes out. They they suffer from something called tablet burn It's not something that I personally want and I think it's something you will not want either if you've never used a tablet before I've never been able to tolerate having a screen really close to me I'm always having to push the screens further back and further back and get larger and larger screens I have this on the table in front of me with my keyboard to my left And I do just fine. It's really like playing a video game I have bought other models like the bamboo pin and touch here And the just plain bamboo pin, but these are different. They function very differently I'm very happy with The the four programmable buttons and the zoom wheel and you notice those models didn't have the zoom wheel in fact Here's a pin and touch model right here. It has a little sleeve to keep the stylus in so you don't lose the stylus Uh, which is convenient, but I don't need it And uh, although the drawing surface is the same size, you notice there's no zoom wheel like I said And the control the four control buttons are on the side instead of the top, which I'm not used to And also here's the thing about the the later models for zooming They expect you to zoom like you would with a With your cell phone or with a touch tablet you zoom by pinching and And using your two fingers and it's dumb. It's just plain dumb I can't stand that at all If if you'd like to try that though, if you think that would work for you, this is the model cth 460 I've gotten the mte 450s on ebay Inbox with the stylus and everything for as little as 15 dollars If you keep looking you can not only get a really fantastic tablet that still works great with windows 10 the latest edition of photoshop and everything And not only can you get one for yourself, but you can get multiple backups like I've got That's how I would go $2,000 on a new Cintiq display. No, I would never do that I do have one other thing to say about the drivers that you use for the the 450 I would recommend using the original driver that was released with it Here's the the number right here. I always had my best luck with this one later drivers Always had some sort of problem. There was something about them that didn't work However, a couple of weeks ago when I finally upgraded to the latest photoshop, which is 2015.5 The old driver didn't work at all and for a while I was kind of stuck. What am I going to do? I know that the newer drivers don't work, but I went ahead and downloaded the latest driver For the mte, which is a few years old and it solved my problems Here's the number Of that particular driver and I'll include a direct link to it in the description below So there you go. If you're really wanting to try digital tablets for the first time Then get yourself an old model inexpensively And learn how to use it see how it feels for you. That's the way to go instead of dumping a lot of money into it I hope this has been helpful. See you next video. Bye Please remember to press that like button it helps my videos get seen and then subscribe So you can come back next time. I do science fiction book tv and movie reviews all the time And please consider becoming a patron. There's a link in the description below