So, usual rules apply. I want to be super clear on this bit as well. These are prototypes. We build prototypes in this show. We're not trying to build production code. It's a very important distinction because what we're not doing is dealing with every aspect of building these components, like accessibility. We're gonna try and do a little bit of that today. Make sure that's at least decent and in a really good solid foundation. We're primarily focusing on the performance aspects and just trying to get a solid foundation and think about these problems in the right way. But if you're gonna take this code onto production, you do have more work to do. You do need to think about some of the things. And you will be judged by us. No, you won't. By him, maybe, but not by us. I, no. Anyway, so. I actually wrote one of these components on one of my first home pages that I use in production. And my thought would be a great idea to animate min-height or max-height, I think. So that means on every frame, the whole text inside the box would be relay-outed. And I just thought that's the best I can do on that. So I just shipped it. And we're gonna do better today, right? I don't know. We'll find out. Right, we're gonna find out. Okay, let's dive into some code. You've heard me waffling on long and long enough. Of course, as usual, if you want to involve yourself, you can get on the chat with Sirma. He'll be around, making sure that there are links posted and everything else. Right, to the code. I have an HTML page sat here. I've made myself a couple of notes on things that I wanted to remember on my way through. And one of them being Lorem Ipsum. Lorem Ipsum. Because what I want to make sure is that one of these panels has got a lot of content. Oh, yeah. Because we're gonna have to account for the fact. It's very easy, isn't it, to ignore long content. And just be like, yeah, so all my content will be no longer than 30 characters or something. Right, we'll do a custom element, I guess. So an SCE accordion, why not? Supercharged accordion, woo. There we go, we'll close that off. And I guess we need a bunch of... So we are doing the whole custom components, custom elements approach again. Yeah, why not? We're making UI elements, making our own components. Feels like custom elements is a good fit for that. But if it's done... Eventually they should be usable again. What we're producing is not really supposed to be reused. Yeah, right. Yeah, exactly. But eventually you want to have elements. It's hopefully a solid foundation. So you could take that on if you wanted to. So an accordion has a bunch of panes or tabs with pain, but I'll call them an SCE pain, I suppose.  And each one, let's give that Well, so he's got to have the header. So you can click on like one, two, three, four, whatever. So I'll tell you what, we'll make it a button. And, yeah, I'll make it a button. Give it some hammer one. We'll just do this for now. So we're gonna have like, let's say three of those to begin with. We can add more later on if we want. So, now I made myself some notes. Each of these from a... If you've never seen it, by the way folks, there is this on the W3C, there is this Aria authoring practices doc 1.1. And on the left hand side, I mean, if you've not seen this before, Rob Dodson talks about this in his accessibility talks. From IO. Yeah, from IO. And also from the Progressive Web App Summit in Amsterdam. And also it comes up in the Udacity course that Alice Boxall and Rob Dodson did. So if you're not caught either of those, or all three of those, I guess, two talks and a course, those are there, they're available for you. You should definitely go and check them out. I'm working my way through the... And they put a lot of effort into the Udacity course, so it's really high quality course that you should take the time to watch because accessibility is important. Yes, and one of the things that came up from Rob was that there's this document anyway, and in here is this thing about an accordion, and it'll tell you what's expected, like all the keyboard interactions and stuff. And they have this huge list of all the common components that you usually encounter when doing a website, and it tells you what you have to pay attention to when you wanna make these individual components accessible. Cool, so alongside the other stuff that we're gonna try and do, I'm just gonna try and make sure that we do at least cover off some of the basics of what one might expect, at least like keyboard controls and tapping and stuff on my way through. But I think Rob's gonna try and pick up where we leave off and make sure that it's all just... Having made Udacity course, he has much more knowledge about the intricacies. Yes, he does. Right, so one of the things is we need a role, and the role that we want apparently, I think, for this is a tab list. Each one of these is gonna have a role of tab panel. And then inside each one of these buttons, we're gonna say that's a role of tab, I think. I think, I think. Yeah, okay. So I guess each one of those needs the same deal. And also the tab panel as well. Why not? Let's do that. And we're gonna have to give them a tab index as well. So apparently if you just want it to show up in the tab order, let's start tab index is zero. Not like zero, one, two. But it means that something that's not focusable will now be focusable. Correct. Because by itself an SC pane is just nothing. I'll put it on, I'm gonna put it onto the button because that would actually be tabbable, wouldn't it? That should be tabbable. Let's find out what happens. Let's leave it out for now and just see what happens. Right, so let's get into some styling. So just because I found it very confusing, these roles, tab list, tab panel and tab, have three different meanings attached to them. So the tab list is the list of all the tabs. Just think of the tab bar in your editor. The tabs are these tabs and the tab panel is the content that is associated with one tab. And that's why we have three roles. At first I thought they would be really redundant, but it kind of makes sense to have these distinctions. Yeah, I mean, again Rob would be Rob or Alice would be the right people to talk about this. I assume it's because of the screen readers make of these roles basically when they're looking through this. Anyway, I'm going to wrap this. In fact, what I want to do is I'll move that to a different part of the document. But basically, you can see I'm setting up myself some content inside, but I'm going to move it this way. Good old Laura Mipsum. Hey, it works in this context, so I'm sticking to it. So, Div, this is again, is it Emmet that people said I should learn? Yeah. Every time. Every time. Still not doing it. No, it turns out I actually have other things on my plate that prevent me from doing that right now. All right, this is some content. That'll do it. That's a different amount of content. Yeah. OK, well, this is some more content then. Yes. Vastly different from panel one there. Got to cover all the possibilities. OK, so by default, let's do, are we going to need some styles as well? So let's drop that into the top. No, don't do styles. Rare equals style sheet. OK, href equals styles.css.  I could have come up with something better than styles.css, but I'm sticking to it now. All right, fine. So styles.css. CSS. OK, let's do body. Let's say display flex direction column. Why not? And then we'll do what we're going to do. Let's do, I'll be a line items center justify. I mean, if this works, I'm going to be so happy. I mean, I'm always guessing with this stuff. Yeah, flex box is not something that you can usually just remember very well. I offend myself. But it looks like it's actually kind of done the right thing. OK, so let's now, let's see, sc accordion. We're going to do that with say, I'm going to tell you, we'll do with 100% max width.  I know, right? Trying to get it, like I said, trying to give a solid foundation. So we're already starting to lock some of this in. You see what I'm trying to do is I'm trying to style this so that if we didn't have JavaScript, this content would stack up one on top of the other. And I think that's. I think they call it progressive enhancement. You'd assume nothing and then you'd progress. No, I know, I'm sorry. Dude, that's fine. Good, right. So sc pain, sc pain. We will say, la, la, la. Oh, I'll tell you what, let's add this. Box shadow. Box shadow, box shadow, box shadow. OK, naught, naught, no, naught, three pixels, four pixels, rgba, should give us a nice little, yeah, that'll do it for now. Justify content center. Oh, do you know what it'll probably be if we do like height, 100% width, 100%? I usually use vh and vw there. 100 vh? I'm going to use the new tools. It shouldn't change visually, but it's just like semantic. Yeah, you're good. Yes, I am. OK, great. Thank you. OK, don't worry. It's really warm in here, so I'm going to upgrade to just the t-shirt, folks. All right, feel better already. Do the crazy knuckle cracking thing, which I'm sure everybody just loved. So we just got a question. What is up with the SC elements? Oh, cool. So you have to, with the custom element, you have to have a dash in there. So you need like x-something, x-accordion. SC stands for supercharged, because it's custom. We're like, why not go full custom and drop SC elements? We put our branding everywhere. The reason I think originally it was behind the dash is that you can avoid conflicting with the native elements. So names without a dash are reserved for native elements for the browser, and everything else is user land. Cool. So there you go. That's why we do it. FC, FC, FC. That's not even a pound. Hey, hey. There you go. FC, there we go. Isn't that even a thing? I don't know. Shouldn't it be back on color? Oh, yeah, man. No, you can do either. Yeah, you can do either, because it's the shorthand. So it'll expand that. Anyway. People want a padding on the accordion. Yeah, I know they do, but they all have to wait. Wait, I want it too. I mean, I'm looking at it going, that's awful. I'll tell you what we'll also do while we're here. We'll do a border radius of three pixels. OK, three pixels. That's what happened when we typed it. And we'll do overflow hidden. And then we'll do max height, 600 pixels. And you might be wondering what I'm doing. I don't know. I'm kidding. I'm kidding. I'm kidding. Right, here's the thing. The default styling for the accordion. I think we only want to do the max height thing and the overflow hidden, these two, when we're sure we're going to be able to build it with JavaScript. So let's do SCAccordion Enhanced or something like that. And then we'll set that like that. So without it, it should just kind of flow whatever height is of the content, which is fine if we can't build this thing. What we can do is we can just chuck in a bit of inline JavaScript here. Script. And again, this will be something you'd probably do a little more neat and tidy. But I'm going to do it inline because I don't want to wait for a network request for this to complete. So I'm going to say document.querySelector. That.setAttribute, EtudeEnhanced, and then an empty string. And all being well, there's no real visual change by the look of it. But we do have an enhanced attribute there. OK, so that's a good start. OK, so back onto the actual styling of these things. So the SCPane, we've got anything for the header. We have a button which has a roll. So we can say button.tab, like that. We can use that. And we will say, should it be roll equals tab? Maybe. Yeah, probably. What is it? Yeah, it's roll equals tab. Otherwise it would be the attribute that would happen. You're quite right, sir. You are quite right. And it's, by the way, a feature I think is very nice of seeing it. And you can select by attribute or even attribute value very underused and probably could save a few classes here and there in terms of JavaScript because you'll need to set classes. Yes. Let's see what happens with that. It's time to look a little bit more like a thing. Yay. Bored and non. So I've seen a question a few times which I think I can address. Yes, this time around we are using visual code. We used it last time, too. Did we? Yeah, I don't know. I switched between it from Atom to Visual Studio Code last time. I'm just fairly relaxed about which editor I use. If you press keys and those characters appear, that's all you need, really. Yeah, I think the only things I need, typically in my editor, are ESLint, which is brilliant. And I need syntax highlighting for ES 2015, 2016 stuff and a fair understanding of what that's going to imply. And then I think beyond that, I don't really use much else. So I know a lot of people need things like auto prefix or another things as well, which is exactly what Totally Tooling Tips is for. Sideplugged was the other champs, Addy and Matt. They do a whole show on the kind of totally things. And things you can add to your editors. Me, I'm keeping it simple. Because I am a man who likes to keep things very simple. So don't say anything, Sir Ma. I know you're fighting the ex. There you go. All right, OK. So this is kind of starting to add up a little bit better. Right, let's have a look at the SC pane content. Are you zoomed out on the main panel, though? It's just the text tiny. Sorry, in the browser. In the browser. Because I assume the buttons are probably going to be hard to read on the screen. So what I'll do is I'll bump all that up. I was just trying to get there. Just trying to get something down. I'm just thinking about our audience. A team on the chat. Hello, team. Hello, team. If you have questions, write them in the chat or Twitter or any way you think you want to contact. Send me an email. Might be a little too late. Yeah, he's not going to check his email. Use the chat. The chat is better. And I'll see if I can incorporate it here and distract him even more. I'm getting better at that. No, you're not. Well, it depends on whether you consider you're getting better at it because you're good at doing. Yeah, I'm better at distracting you. Thanks, Bill. Good to know you've got my back. Right, now you see we've got this overflow hidden. And so that's going to stop me from actually scrolling the content. And actually, anyway, these panels are stacking up. So meh, we've got to fix all that. Right, so let's do that. I think I'm going to jump that up to 48 pixels. I'm going to do that. I'm going to say font size, I'll say background, and then color. I'm going to add that white color. Hopefully that's OK. Right, I think we're starting to get to the point where we can actually add in some JavaScript, I think. Right, which is good. This is good. Kind of like into the juicy part now. Yeah, so in the event that, for example, let's just double check that that's doing its thing. In the event that settings, disable JavaScript, we don't have JavaScript. The content's starting to just stack up, OK? Pro tip, you can get the panel by pressing F1. Every time there's always something new to learn. Do you can do this? Got a new tip? You're doing a performance thing. OK, all right. So with the JavaScript disabled, you see the content stacked up with it enabled. We're starting to actually add on and enhance. So let's now actually get into some more stuff to do with that. So let's make our SCAccordian.js. So JSE, which is my shortcut here. I know it's so good for me. So SCAccordian. And we'll map that to SCAccordian. And that's all you need for the custom element, by the way. These fuel lines are a class that derives from HTML element and a register element call. And you're done. And I answered this question in the chat, but I will say it again. There's a polyfill that is like 4.5 kilobytes GZIP that basically allows you to do this kind of JavaScript coding even in IE 9 or 8, I want to say, very far back. It's a very tiny polyfill and basically gives you a very uniform platform to work with to do custom elements. It's great. I love it because I get a lot of the things that come. Normally when you do this kind of code before this, you pass in some kind of target element. And you'd always be like this.target.querySelector or whatever. Now you just say this.querySelector. It kind of merges in the JavaScript. Yeah, and you get the lifecycle callbacks and all these kind of things. It's very clean. So one of the things I feel like I want to do here. Let's see. What do we want to do? I think what we want to do is we want to do a little bit of figuring out where the elements need to be on screen. So for example, if an element is expanded, all the other panels should be either above or below. So we kind of need to. So actually what we're going to have to do is we're going to have to have some. We probably need a list of all the pains that are inside the code anyway, right? Yeah. So this.querySelector, let's start with that, I guess. And so scPain would be the thing. This.pains, why not? So we're going to grab the pains. When we attach the pains, let's say we want to do this.calculate geometries. That's a really nerdy way to call that, isn't it? Whatever. Let's stick with it for now. And yeah, it is more descriptive than bounding client writes. Yeah, that's a funny name for something. OK, here, what we want to do is we want to say this.pains for each. Just a quick question. QuerySelector all in created, but not in attached. Can that not work? Like, is there a scenario? Because in created, it's not attached yet, right? It's a node list. So it should be there. Do you want to find out? Let's find out. Let's find out. Let's find out. It will work if it's in the document, but if you create according dynamically, you create an accordion, then attach it to the DOM, or then attach the pains, and then attach them. All right, let's move it. Let's stop pains. Let's just set it up there. I like it. OK, and then we'll just get back here in the detached. OK, that's also going to work. Right, so in the calculated geometries, we're going to say pain index. So if, oh dear, all right, let's think about what we want to do here. If the pain get attribute area expanded. So I'm going to put this expanded attribute on the pain that is expanded. Yeah. OK, so I'm going to start with the first pain expanded. All right, so that's what I'm doing. If it's expanded, we're going to have to. Now, what do we need to know? We need to know the height of. Right, so let's see. This dot header height equals this dot pains 0, right? Now we need an early escape. If this dot pains dot length is 0, just return. We can't do anything here. Right, so we're going to ask for the first pains. Let's see. So we could actually, oh, let's do this. OK, so we're jumping a lot today. SC pain, pain dot JS. Oh, HS, that's not going to do it. Rename. All right, so what I want here is I want an SC pain. And this is going to apply to all the pains inside of the accordion. OK. So here's a question. Why did you call that attribute area expanded and not data expanded? It's a proper area attribute that a screen reader would understand, I understand. At least apparently in the context of a tab list. Yes, or a tab list or an accordion. I think it tells the screen reader. I think you might need to use area hidden for the other ones possibly. We don't quite know. We're working on this in the same way as we work on our performance stuff when we try and understand that, but same goes for the security, accessibility, even just how to structure code. We're all a journey in it. All the spaces to be explored. Wait, what? All spaces? I thought you said tabs versus spaces. I thought you were getting into that. I'll be the panel. Quick quiz on the chat, tabs or spaces, which is better. Oh yeah, vote, go. OK. While they're doing that, I'm going to be over here. So what I think we want to do is let's say we want, I believe those where they are for now. I'm going to say get header. And I'm going to say if this dot header, this dot header equals this dot query selector button, roll equals tab. And then I'm going to say return this header. And in fact, while I'm here, because I'm almost certain I'm going to need it, content. OK. We're getting there. Singing while you code, that's what you should do. So apparently, currently, space is leading with six votes versus seven votes versus tabs with zero votes. So we obviously have a web audience right here. We obviously have a consistent audience, which is, you know. Good. Yeah, no fights yet. That's good. We shouldn't have done that. No settings. All right. So we're going to ask for the first pane. We're going to actually ask for its header. And then we're going to ask for the offset height. So you can see what I've done here is I've asked for this header, which is going to call into the getter here, which is going to query selector into the to find the button. So it's just a kind of way of just providing a little bit of an interface to that header element that should be inside the pane. But we need to make sure now that we actually have those two scripts, source equals. We'll do the pane first because. So if you register an element, will the browser go and update all the existing ones immediately? I think, yes, I believe so. I think they start off life as an HTML unknown element. This will be, again, this will be a question for someone like Eric Bileman. True. Or Rob Dodson, again, who both are very, very, very knowledgeable about these things. But my understanding is it starts off life. The browser is going to see SC pane and SC accordion go an unknown HTML unknown element until the JavaScript kicks in. And we're calling document.register element scpane telling it what it is. And it goes, oh, cool. Let's do the work. Let's do all that work now. And unknown element basically behaves roughly like a div, right? It's just a span, I think. A span. I think it's more like a span because I don't think it's display block. I think it's more. But it's inline. I think it's inline. So it's more like a span than a div, I think. OK, so we can go. So we know the header height. Let's just say, let's do this. OK, now let's leave it where it is for now, because we'll see if we need it later. So we're asking for the header height, which we asked for once. Let me just see if that works. So we go to there. We'll run the debugger. And local header height is 48, which is correct. Because that's what I specified here in here. So that's working as intended. So what we need to do is the available height. So the available height to the contents of the accordion is this.pains. So how many pains we've got? Dot length. So yeah, that's that. Times by the header height. And then we're going to actually ask for this. Good old basic math for the rescue. If I'm any good at it. So it's the overall height of the element. Let's drop another debugger statement in, actually, and just see about that. Go again. Also, by the way, a nice feature I just recently learned. When you just type debugger, semi-colon, in your code, Chrome will just stop and jump into the inspector, into the JavaScript debugging mode, even though you didn't even have it enabled. I think it's a great feature. Why, why, why, why is that not showing up? I did save it, right? So I should have available height. Weird. It's not showing. But it's not showing. It's not updating my code yet. I wonder whether I just need to do that. How about disabling cache or something? Maybe. Let's try that, disable cache. Yes, what do I make? Weird. So the available height is 456 pixels because we've got three panels, each of which has that header, one, two, three. And then the available height is going to be the 456 pixels. So what we want to do is we kind of want to set the body content of each of those elements to be that 456 pixels. It's a very strange thing that I probably look like I'm doing here, but it should all work out in the end. So in which case, I'll tell you what we want to do is we're going to say that with that, and we'll say overflow, what, overflows? Whatever that is. Overflow, the flow. Why, scroll. OK, so we can scroll that. Because what we're going to define is, I think, this long one here, it's going to have its height truncated, and then it's going to want to scroll that inside. So yeah, that should be the right thing there. So what we want to do is let's start this here. We're going to say, so what we'd do is we'd say pain, whoa, Paul, pain.style.top, no. No. Translate. How was it, by the way? Transform. Transform. OK, OK, OK. Translate. It's because I'm thinking these things through or something. This dot header height times by the index. And then a pixel thing on the end. So for that to work, the accordion itself is going to have to be position relative. Relative. And the pains are going to have to be position absolute inside that. Oh, you're going to say all position at the top and then only work with transforms. There we go. There we go. So panel one, panel two. Now I wonder why. Why, why? Let's have a look. I was expecting all three to be stacked up there. One. And then panel two. And then why is that panel three down there? Yep. It's fine now. Go on. Do you have an idea? That's a no from Serma. Wait, did you have the pixels outside the parentheses? Probably. Yes. That would be why. Translate, why? Does that work? Does it make a difference? Oh, do you know why? Because you want them to be top zero. Probably. I even said that. Now they're all overlapping. Yes, now transform, translate, why? So that should be, is that top zero? This is always the fun bit, is, yeah. So why is that pane, SC pane? Does it have position top zero, though? At the top zero? Well, no, that's what I was wondering. Is why, oh, it's because I put that on the button. On the button. Hey, Paul. Right. All panes, all pane, should be like so. But only when enhanced, right? Yeah, OK. You're right. So we can do that. OK. Now that's disabid. Well, that's not what I expected. Ship it. Yeah, it's perfect. OK, max height. So let's just change it to height 600. Oh, yeah, of course, it doesn't have height anymore. Yeah. It's pretty. Now it looks really, really broken. So what we'll do is we will also say with 100. Let's see if that helps. It should. Yeah, there we go. OK. So one, two, and three are doing their thing, which is good. Don't worry too much about the overlapping text. No, no, no, we're going to get to that. Don't worry, we're going to get to it. So that is all looking OK, I think. Let's see. So we've got the first panel is there, second panel is there, and the third panel is there. So that's good. Now we need to make sure that each of the accordion height is OK. So then we say pain dot. I was right, I need the content. So I made another getter here for the content. You can see that here where I'm just asking for the content. So pain.content.style.height equals this dot available height in pixels like so. So that would then mean that these should all get truncated down, which is fine. Now what we need to do is we need to basically, and rather than this is the offset for each one, but we need to kind of bump the non-expanded ones out of the way. So this one, panel one is expanded, but its content is hidden by panel two and panel three. So we don't want them to be moved down. Yes, we want to basically move them all down by the available height. So that's where this comes in handy. We can say, so OK, I think what we're probably going to do is we'll say let base y equals 0, and we'll do base y plus that. So by rights, that wouldn't change anything. But if you hit the one that's expanded, base y becomes the available height. That didn't work. Why did that not work? We have bugs. Who's? Let's go through step by step. OK, area expanded, get attribute. OK, let's go through step by step. So none of them think they've got this area expanded attribute, which is unexpected since I think. Is the function running at all? Oh yeah, it should be like the other trends. Yeah, yeah, yeah, exactly, right, exactly. So let's just, I'm just going to write it. Actually, I'll just do that. Yeah, so they're going to be here. That is working. SCPain, you seem to be there. So what you can do is what you can do like $0.getAttribute. Actually, you can just do pain, can't you? Because in scope, getAttribute, area expanded. So he says no. I know why. I remember it from Rob Dodson's talk, where he said, the area attributes are really like maybe we actually explicitly need to set equals true in the markup. Otherwise, the browser will just ignore it. Cool. All right, area expanded equals true. Do you see if that works? Yeah, no, wait. Resume. There we go. There we go. Nice work. He did something. Nice work. And also, well done, Rob Dodson for putting out the. Thanks for teaching me. The college, well done. Right. So with that done, interesting. So now the panel one is expanded. Panels two and three are out of the way. It feels so real. So this is starting to feel like something we'd want to actually say is working. So let's do interaction. No? There we go. Just a bit of a divider line just between those panels just feels a little better. How's everybody doing on the chat? They're saying they're learning things. They're learning things. We're achieving our goal, man. Yay. I learned somebody said add a border bottom between each button. Yeah, I did that. And we came up with the. Yeah, it's good. OK. All right, so here's what I also want to do as well. As I want to add, I'm going to add a focus state here as well to the button because I think it's helpful to know not only that the panel's expanded, but you can see that slightly. The default for the browser is to put this usually blue-ish outline below around it. But I suppose what I'm doing here is I'm just sort of doing that to it just so that it's very clear which of the panels is hopefully going to have focus in a moment. And you can see also I'm actually getting tab focus here as well, which is good. That's what we want. Right. So now the question becomes, how do we actually then animate these things? Seems like a thing we want to do. Let me call Paul Lewis. Animate transforms and not positions. Wow, it's like having another me stood just to the side. OK, good. What I think we want to do, let's just say, let's do that. And we're going to say move panels. I'm doing this. What I'm doing is I'm moving the bit that moved the panels out to its own function because I think we're going to want to do that in a mode. Let's do that. OK, that's the works. Here's something. You see that little flash when I first refresh? I don't know if you saw this. No, it's not doing it now. It did it just a moment ago. There. There. Yeah, that's because your progressive enhancement is starting late, right? Yeah, so exactly. So we should probably account for that and just say if we've managed to set the attribute of enhanced, OK, we should probably actually set display to none. And then what we'll do is when we get something where it says, say something like active, we'll set display to block. Now, you might just say visibility hidden here, actually. I think I might do that today. Visibility hidden and then visibility visible. Because we don't want that flash. And so now what we have to do is, oh, actually, and I can take advantage of this as well. Well, let's just one thing at a time, Paul. One thing at a time. Breathe. When we've attached it, we're going to say this.classlist.add. No, it's not a class. Set attribute. There we go. Attribute. It was active. So when we see that now all being well, we should never see that flash. It's going to be invisible, but it'll still take up its layout so we won't cause a reflow or anything like that. Right, that's good. Actually, interesting question. Somebody's asking why visibility and not opacity 0. Yeah, you could do opacity 0. And if this was a primed element, so I talk about this bunch in my side nav. Yeah, the side nav one. And I talked about it at the progressive web app somewhere in Amsterdam. If you've got an element that is primed as in you're expecting this thing to be on screen immediately or could be on screen, then using opacity 0 and will change transform stuff is like the right call. So the difference is now that when we are switching from non-active to active, the browser is actually to add it to the DOM and render it. While with opacity, it would already be rendered. Yeah, so you're going to paint it anyway. So in this case, we see that when I switch on paint flashing there, you can see that. You can see that it flashes green on screen there. Because it's going to paint it either way. Whether we do the opacity 0 and then fit in. It's a large part of this is basically going to depend on the app that you're building. And also how long you think it's going to take for those definitions to arrive for those custom elements. If you think it's going to take a while for them to arrive, you might be better just switching the whole thing off. Bearing in mind that I actually have some styles that are, in this case, if I use opacity 0, I'd still have style changes to make as in paint changes that would happen when the definitions came in. So even if it's opacity 0, you'd still have to repaint it and then fade it in. So I'm just toggling the visibility. There's loads of ways you could play this. OK, right, so now what we need to actually do is when you click on one of those buttons, we want it to kind of shift. So let's see what we can do there. Created callback, that's actually a pretty good thing. Let's do this. What we'll do, we want attached, I think. We'll do attached callback, attached callback. Yes, you do call. Yes, I do. OK, this.header.devent listener. Click. Another thing that I was taught by Rob Dodson in his Iowa talk, I think, is that because we're using a button for our header and not something else like an H1, we will get keyboard handling for free. So the click handler will fire even though somebody is pressing the Enter key on it. This is good. Which is something you would have to do manually if you weren't using a button. I'm going to do a custom event because I think that's quite good fun. So there's the type arg, which is a string. So what are we going to call it? We'll call it panel change. And then we need to tell it that it bubbles up. So it's going to happen on one of the panes and we're going to have the accordion catch it. It's going to be going to delegate handling out to the accordion itself. So we'll say bubbles. Bubbles. Can't even type bubbles. Bubbles. So we're going to say this bubbles up. Custom events, nice. And Linting is not happy with me. Go, go. And we don't need that event, actually. So we'll just do custom event. And then there's a dispatch event. I think so. Dispatch event. Not this, though? No, it should be window. Or maybe it's this. Let's try this. It needs to bubble up from somewhere, right? Yeah, yeah, yeah, right. Dispatch event, custom event. Hopefully that will work. Let's find out what we'll do is we will have panel change. So let's do this.add event listeners. No underscore, though. Oh, oh, you're doing the whole batch. I didn't say anything. I was wrong. I'm not keeping score. So this.add event listener panel change. And then say this.onPanelChange. OK. So on the panel change, we'll do just a bind overwrite. We'll see. I probably do, actually. I probably probably do a good call. So we're going to just add this event listener. And we'd probably need to remove event listeners. But let's just do this. So when we do that and we click, we're firing the debugger. Nice. So we actually just sent a custom event that didn't exist before on the platform. And we made it. So we made our own customer event over here called panel change. We said that it would bubble up from the pane all the way through to the upwards. And we just kind of intercept that at the accordion level by adding an event listener for panel change. And that is going to work out really well for us. So now we know. Let's see. So we can have a look at, in fact, back here. We will have. So of course, yeah, there isn't any. So when we do, we can just say, let's put the debugger statement back in. So I click on one of these. And the event is the custom event. And the target for that is the pane itself, which is actually very, very useful. Because, so we can say event.target.set attribute area expanded to true. Like so. Maybe you have to do it like that. Probably have to do it like that. So we set that. And we can say, let's say this.query selector all. Actually, we can just do this.panes. We've already got them. This.panes for each. And we'll say pane. I just want to say these for each map and reduce are my most favorite things about ES2015. They're so good. It's so good. This filter, I really like. Filter, find, map, reduce. Once you get to use them, I find I had to use them quite a lot before I kind of, they clicked. I don't want to miss them anymore. Map is map. Which one's map again? OK. Eventually, yeah, I got them. For me, I don't want to go back. Right, so for each pane, we're going to say remove attribute area expanded. So are you just removing it from all of the elements and just putting it onto the one? Onto the one that whichever one was actually clicked. And then after that, we can say request an animation frame. We want to wait because we're going to make some visual changes to the transform here. So request animation frame.  So we're doing a request animation frame because we basically need to wait for the browser to be aware of the change of the attribute, more or less. So we might work out fine, but I feel like we're making a visual change. And I think I always just want a default to, I'm making a visual change that should be in a request animation frame if I'm having multiple things. That's probably a good habit to just have. Yeah, it's a habitual thing for me at this particular point. All being well, something would happen, but I don't know that it did. So let's have a look at why. So we're tapping on this. So area expanded true, area expanded true, area expanded true. So it is swapping the area expanded. And too, what we can also do while we're here is we can also say we could do that attribute hidden true. So we could say that these panels are definitely hidden. And then the one that we want to work with, let's just say, const target equals that. We will say target that, and then targets that. And then I still wonder why it is. Got to spell debugger correctly for this to work. OK, that's working there. OK, it's not firing. We have an error, though. We have an error. Pain.addAttribute, setAttribute is what it really should be. So that's that.  OK, so that's not firing. That's interesting. Unexpected. So this.movePanels is not. You should probably put parentheses behind movePanels. I should make it a call and not just a reference to a function. That'll be what it is, folks. Yeah, got the debugger statement. Well done, dude. There you go. All right, let's see what happens now. I think that also looked like it went wrong. Yeah, I think so. Let's find out. So panel two. Yeah, so panel two. So panel two, panel two. So that one didn't actually push down where we expected it to do. Wait, there's two? Oh, it's just basically it's sitting over the top of. So we've got one, two. We expect that translate wide there. Not to be 96 weeks, which would be like 500 or something. Yeah. So for whatever reason, that getAttribute didn't actually. That's because I'm here. Because I actually did that. Right, let's try that again. There you go. There we go. There we go. Panel two. So this is already really, really close to what we were wanting to achieve. So now the last thing that I just kind of need to do here is just to set the background color to be white. Because you can see here the panel three. They're overlapping. Yeah, they're overlapping. So that's good. So if you want that visual effect, go for it. So you can see here, I can actually tab as well. So that's actually doing its job, which is cool. What we could also do, let's see. Oh, yeah. The major thing is not actually animating. I was about to stop you and be like, Paul, we are talking about UI and animations. This is me.  Right. So if you want to be active, when the accordion is active, we know that we've, in theory, got everything set up. Well, I'd say that. Let's go and have a look at the code. When it's attached, we do all the blah, blah, blah, and we move the panels. And then we set this attribute to active. What I'm going to do is I'm actually going to hide that behind the request animation frame. Because what I want to happen, in fact, I'm going to end up having to do this, do it twice. But we'll find out what's going to happen is we're going to make all these changes, particularly moving the panels with the transform. I'm about to switch on transitions on transforms. But I want them moved first so that we don't see an initial slide of the page. In fact, let me just show you. So that means we're going to basically put the animation, the transition, only when active has been set up. When active, yeah. I'm going to do that now just so that you can see what I mean. So when the accordion is active, we're going to tell an SC pane that a pave that we'd like it to transition on transform. And we'd like to take 0.3 seconds. Come on, do the QBB there. You like it? Yeah, 0.31. So you see, when I first do that there. On load, we already have an animation which we got one. We get that initial, which just looks just smacks of, oh, I quickly got this together. I don't know. It just doesn't feel right, which is why what I was saying was what I'd like to move them first and then switch on the animation. So we can hopefully do that by just hiding it behind here. So that means move panels will be called, we'll take care of it positioning the panels. Yes. And then we will add transitions. So now you can see we've actually got a functioning accordion. We can scroll up and down in between the panels. We can do so. We can tap around. What I actually feel like I wanted to do that is I wanted to press up and down, up and down, left and right on the keyboards. And I think that's something we could add hopefully pretty quickly here. Let's give it a try. Let's see. We have a question on the side why we use overflow Y scroll and auto. And I think auto would be the better choice actually. Well, it depends. So overflow Y scroll is going to put the scroll bar there the whole time. So you won't see it here when I've got a track pad. So here you won't see it on the track pad. You only see it when I actually scroll and then it fades away and disappears. On a device where you've got a mouse plugged in, often you'll just see the scroll bar just there when it's overflow Y scroll. That's what you have right now, right? Yeah, but it will even appear for these. So if you want the kind of visual consistency of all my panels have scroll bars, whether or not they need them, you'd have overflow Y scroll. If you're happy for it to just only appear on demand, that's when you use auto. So it's a valid question. It's about a choice to make both work and I guess, yeah. Yeah, both work. In my situation, I feel like I just want the scroll bar there to be like, this just has a scroll bar.  Okay, well overflow Y auto for you and there's no problem there. Whatever makes sense for the thing you're building as usual. Right. So with that said, I was saying I wanted to press kind of up and down because we're doing fine. We have time to spare. So we can do this dot add event listener. Listener key down. I would go with key down. Yeah. Key down. You can do on input. Input is a very strange one. But I think input is only defined on input elements. Nope. Yeah, maybe. Probably. Okay. All right. How are you? How are you with your, your, your key codes? Um, I, I always just console them and press the keys that I need. Yeah. Which one is this? Actually, I mean, we have add in the newer API is we actually have string identifier. So you can say key underscore a or key underscore arrow up or whatever. But even then that is not very well supported. And I still don't remember the name. So just, just yeah. Okay. Let's do that. Yeah. Yeah. That way console.log ebt.keycode. I think this is, this is how I would normally do it anyway. Oh, just be like, okay, I need to know. You end up building the switch case anyway. Key down. That didn't work. Hang on. Uh, set focus on one of the tabs. Maybe it's, maybe it's, maybe it's that. Is the accordion the thing? It tapped one of the, no. Okay. That's what it is. Didn't have focus, right? So up is 38. Down is 40. I hope everybody's paying attention. Remember those pop quiz tomorrow. No pop quiz in about 10 seconds. When I go, what was up? Up is 38. Down is 40. Left is 37. And right is 39. Up 38. Okay. So it's basically starting 37, 38. With those, we want those. It's starting left and going clockwise. That makes no sense whatsoever. Don't worry about that. Switch. We're going to switch. And if we see switch and we see case 37. Or case 38. And if you ever write a switch case, do people have ever put a comment next to them? What keys those are? See, I was going to do them. Or do fancy getter things. Yeah. So key up 38. Um, key left 37. Why not? Okay. Um, key right. Key down. Can you remember? Anybody remember what key right was? Somebody said up is 63. And I think they're wrong. That's not true. Don't, don't, don't make life hard of us. We already have parts on our own. Right was 39. It's left is 37 and then clockwise. That's, okay. Right. So case. Um, you and your logic. Hang on. Let's do that. Start it. Folks, you don't know, but it is incredibly warm in this room. It's very, very, very warm right now. There's the things we go through for you. It's, it's a, we've got a lot of love in this room right now. Key up. All right. Let's do a key up. So this makes it so much more easy. Easy. Easy. Key up or key left. And then that we have added this to the platform. There is the, I think it's called dot key, which is a string. And then if I, which just says escape or key up, but it's not widely supported. And I don't remember what the strings are as well. Yeah. I can't remember either. Oh, is it complaining? Cause it doesn't have a default expected default case. Well, okay. Then fine default. Nothing. Break. Do nothing. Uh, so key right and down. Okay. So what we want to do first of all is like, we need to figure out which one is the currently expanded item. So we can do this dot query selector. And we can say SC pane, which is area expanded. Yeah. That would, that would be the thing. And what we'd want to do is we say, so we'll do let index equals thinking, thinking, thinking, I'm thinking. Find an underscore paints or something. Yeah. I can't because it's, it's a, I can do, okay. Array dot from. So we have to convert the node list over to a thing. And then we just say index of that. That's totally what I meant. That's, is that really what you meant? Roughly. Okay. So fine somehow returned an index, but maybe it doesn't. So then what we want to do is we would want to say index minus minus index plus plus. That's all we want to do there. And then I think outside of that we want to say if index is less than zero index equals zero. Else if index is greater than or equal to this dot paints. How's everybody doing on the chat? Pretty good. Yeah. Some people say they are sitting in rooms just as hard as ours. I doubt it. I'm actually melting. Imagine if I had hair.  I wouldn't look ridiculous. I would look. I actually looked ridiculous with hair. If that were possible, I looked more ridiculous with hair. Anyway, so if we hit the end of the array, we're just going to set that to this dot paints dot length minus one. And then what we want to do, and then what we want to do, you know what we're going to do? We're going to have to find that again. So let's just do const. Why is that invented like that? That's not going to work. Oh, it is. It's in there. It's fine. Right. Fine. The editor is right. How dare it? OK. Paints array. Or whatever. It'll be fine. Apparently there's a dot find index function on arrays now. There is. There is. There is. It doesn't return the index, though. It returns the item itself that it found. So you'd be like, like, paints array would be, I thought, no. It'd be like, let found item equals paints array. And then you do dot find.  But it's also apparently find index. Oh. Another function that gives you the index. Oh. I apologize to whomever said that. Do you want to check that out on? Yes. I'll quickly give it a check. Just see if it's actually in. Yeah. That's the one. Yeah. Look at that. That's OK. So find index. So what's that going to return? What? You give it a callback. You give it a callback. I'm just going to leave it as is. It's not going to be broken. We're not going to fix it. But thank you for teaching me something. Yeah, and me. I appreciate that. We're all learning things here today. This is why we do the show. We're going to find the one that's expanded. We're going to find its index. We're going to increment the index. We're going to lock it so it doesn't go out either side. And now we want to find the new one is going to be panzerayindex. Right? This is the new one. And then what we want to do is we want to call this dot onPanelChange. And we want to do that with it. But PanelChange takes an event. I know. I know. Well, it takes something with a target, actually. That's true. So we can just pretend to be an event. And just make it work. Yeah. Like that. So all being well, that's strange, isn't it? Well, the focus still sits. You have to call, actively call dot focus, I guess. Yeah, that's right. You're right. I don't want to do that. I actually just want to call. You're right. I just want to say panzeray. Dot click could actually work. Dot header. Focus. Yeah. No, I want to find that. Oh, yo. Right. I'm just in theory. Oh, that's interesting. Why is it doing that? If it is greater than or equal to the panes dot length, should have been OK with that. Hang on. Let's just. Interesting. Well, let me go past 1. So it's not happy. It was a panes dot length. Huh. Interesting. But that should be index 0, 1, 2. If it's that. Interesting. Oh, of course. Oh. I don't get it. I don't. Right. You're ready for it? Yes, unlike me. Actually, this is going to be messy. Let's think about a better way. OK, so index is basically being reset each time. It starts from the currently expanded item. We don't necessarily want that. Dot on the selected item. Yeah. So what we want to do is on the panel change. Can you just query for dot selected or dot focus? A colon focus? Focus. Yes. You're right. You could do the scpn dot. Yeah. Column focus? Yeah. Shouldn't that work? Yeah, that's kind of messy. Or get focus. Isn't there like active elements on document or something? Yeah. You're right. You're right. You're right. But then you'd have to find the containing parent and then jump to the next parent.   Also, good remark. Somebody said we should just do modulo there. Yeah. You can do that. Definitely can do that. But you'd be wrapping around. Oh, that's true. We don't want to wrap around. We don't necessarily want to wrap around. We might want to just lock to the end or lock to the start. So modulo, definitely if you want to cycle around. So let's get longer. It might actually be good to wrap around. But for now, we're going to keep it this way. Yeah. So I feel like, yeah, you're right. What we can do is we can at least ask for, let's see. Button roll tab. OK. I mean, we could do SC pane. Sorry. I'm just debating this now. OK. Roll equals tab colon focus should work, right? We can do that. But I just want to make sure. OK. Sorry. Which way do you want to do this? I would just query for SC pane space, the roll equals tab colon focus. OK. But you just do star, roll equals tab. You don't have to do anything, I think. You just do roll equals tab. I think it works. I think I've done this before. Shall we find out? Right. So you'd, hang on. You've got this here, const selected item equals that. And that's going to focus. Yeah. Focus or focused? Focus. Yeah, should be right. Focus, right? Yeah. I'm just looking at the stars. I don't know if you used it there. OK. So with that, selected item is the button. That's true. Which is great. That worked. So then we can say selected item dot parent node. Right? Yeah. OK. See if that works. You're joining a button and joining an array right now. Am I? Aren't you? No. Oh, it nicks off. Yeah.  So basically, so we're finding the currently focused header. I feel like that's brittle, but OK. We could probably do better, but for now. Yeah, you're right. This is prototype land. Paul, prototype land. Live in the prototype. OK. So we're going to let the index be that. We're going to lock it in. We're going to basically, if it goes past the end of the window, which is fine. We're going to do that. There we go. I think. I think, sir. Fairly confident. We are working as intended. Look at that. And if the person was pointing out that you could do that. So you could just do index modulo equals this.pains.length. This would be another way to do it so that you basically cycle around like that. Yeah. Which would be fairly useful if you have like a lot of items. Yeah. And actually, let's just see if that works now. Let's just, what we can do is let's add in a bunch of other items here. Well, we're just going to add in one more because this, yeah, I don't want to. Oh, living on the edge, aren't you? No, no, I'm really not. Not today. All right. We are running long time. It's working fine with multiple panels, multiple panes. And hopefully, folks have enjoyed seeing us work through some of those fun bits and pieces. Right. We did something. We did. We did. We did. We'll post the code as usual. Thank you so much for joining us. Don't forget you can subscribe. So we're now going to take a bit of a break now over the summer period. Because it is just too warm in here. It is too warm. Enjoy the sun, which is not becoming for the typical developer I fear. But whatever.  I don't like the sun. Together we'll probably be making up. Probably average. Anyway. Yeah, thank you very much for joining us. And we will catch you probably later in the year. See you then. Bye.


Grand-diliquence. Anne's plain-spokenness is the necessary counterweight to her husband's grand-diliquence.


How much digital data has been created so far in the world? In 2020, the amount of data created reached a new high of 64.2 zettabytes. But what is a zettabyte? It's a one followed by 21 zeros. The internet has grown so much that it can no longer be counted in gigabytes. Nor in terabytes. Not even in petabytes. Even exabytes fall short of measuring the size of the internet. And now you know.


Heather writes, question. My boyfriend says I love you too, instead of I love you when he says it, wait. My boyfriend says I love you too, instead of I love you when he says it first. Does it mean the same thing as I love you? If so, why does he have to add the two? Oh, now if I'm understanding this correctly, you're saying I love you and then he repeats it, I love you too. Listen, folks, we've been literally indoctrinated with this, think about your children or think about when you were a child, when your mom and dad or you say this to your children, I love you, and they go, I love you too, mom, I love you too, dad. It's very natural to follow up with that. Most likely though, when some, but your children rarely out of the blue say I love you. I gotta tell you, when I get a text from Colin that says I love you, breaks my brain, that's just my heart melts. And so, and my point is, is children oftentimes don't initiate even 10 full or even remotely close to the 10 times we initiate with our children. Here's the thing, I think in romantic relationship, if you're not building, if you're not co-creating a relationship together, you're just merely companionship, connection and sex, then oftentimes people feel nervous saying the words I love you because to a man, I love you can mean a commitment to the future that they may not necessarily be ready for yet.  This is why I sometimes prefer the word like better than love. So I'm here to say that when he says I love you too, sometimes it's just conditioning.  That's a possibility. I would have conversation with him about that. I would also invite you to start exploring, co-creating a relationship together by reading the book, eight dates by doctors. Folks, I gotta stop here for a second. I'm gonna hold this book up. Most of you are effing clueless when it comes to the mechanics to a healthy happy relationship. Let me repeat that. Most of you women, most of my audience's women are clueless. If you haven't read this book to understand the mechanics to a relationship, you're basically winging it, winging it, winging it and you're basically expecting men to be the leaders of the relationship and let me tell you something. You're giving the job to the wrong person. Men are terrible leaders at the relationship because they're even more clueless. Now part of the difference is with midlife versus men in their 20s and 30s. When a man is in their 20s and 30s and they've decided they want a wife, they're actively focused on finding the mother of their children. After age 45, when guys stop having children unless by accident, they don't know what they want. And folks, you don't know what you want either. In fact, I just got a letter in the mail saying, Jonathan, let me illustrate this point. I was working with a woman a couple of years ago who called me up or wanted a coaching session and she's telling me about the relationship and she says, Jonathan, I want more commitment from my guy. I'm like, great, what does that look like for you? But Jonathan, I just want more commitment from the guy. I'm like, great, what does that look like for you? But Jonathan, I just want more commitment from the guy. I'm like, great, what does that look like for you? But Jonathan, and she thought screaming was describing. Her screaming was coming out of anger that she thinks I didn't understand her. What she didn't understand is I was asking her to describe what it looks like. And this is why I continually share what it looks like for me to give you some context to creating your own. For me, it's like my committed relationship looks like ideally would look like this. We spend three or four days a night a week together doing shared activities, hobbies, mutual interests, spending time with family and friends, traveling together, teamwork, building schools, both in our personal and our professional life, intimacy, both physical and emotional intimacy that leads to either moving in together or getting married. That's what it looks like. But Jonathan, I just want more commitment.  Ladies, I say this with love, but some of you are batshit crazy, okay? And you wonder why it's so problematic.  And I'm grateful you're listening to me. And if I turned you off, then you're not ready for this message. And if I turned you on, and I don't mean by my looks, by my words, what I mean, then I invite you to do the work. That gets interesting. I had a contemporary critique one of my videos and in that, I talk about a lot of books and the comment section on his channel was all this guy is doing is telling us to read books. Who has time to read books?  You want a healthy, happy relationship and you're not willing to invest maybe one year of your life reading 15 minutes a day. In 15 minutes a day, you could literally finish all of the books I recommend in 15 minutes a day or 20 minutes a day.  I'm being judgmental here a little bit, but you're not willing to do inner work so you can actually be a good partner. Folks, if you're not willing to do the work unlike this woman who went to the Hoffman process I shared with about before, those are the people that are gonna end up in the juicy, delicious relationships and everyone else is gonna have most likely mediocre relationships or worse dysfunctional relationships and let me tell you something. Esther Perrell said, the quality of our life is predicated on the quality of our relationships and let me tell you something, life is all about relationships. First, the relationship with yourself and the relationship with others and I gotta tell you, most human beings are stunted emotionally. Most human beings are stunted emotionally. When you become emotionally mature, you get tired of people really quickly.  You have a lot less friends and at the same time you have much richer friendships when you're with people who can actually be intimate with one another and intimacy stands for into me you see, into me you see, into me you see and that's my invitation for everyone. So I went off on a tangent here. I forgot the original question. My boyfriend doesn't say I love you so that's my response to that one. All right, thank you so much for that question, Heather, I appreciate it.


Hi, I'm Richard Darst. Hi, I'm Simo Tuamstam. And we're here to demonstrate installing Anaconda and an Anaconda environment on Linux for our data analysis course. This may be useful to other courses as well. So here I am on in my Linux terminal. So I've already downloaded the Anaconda Linux installer. So I'm going to run that with bash. So bash Anaconda. So I run this, I type. We read the license or more precisely we don't, we type yes. The default place to install it is usually good. So this will take a minute or two. Okay, so that didn't take too long. So I have this warning here, which I'm not going to worry about. Do I want to run Conda in it? And on my computer, I always do no, because I want complete control over when Anaconda is used and when it's not. So there, that is done. So to activate the Anaconda environment. I do source Anaconda 3 in activate. And there we go. And we see my prompt change to show that I'm in the base of the Anaconda environments. And now we need to install the data analysis packages. So here on the data analysis workflows page, if we go to the software installation, and then we scroll down some. We see this environment file defines all of the different packages that will be installed. So we can get this directory with git here. So we can run git clone. I'm going to copy it. And then paste it here. I had to remove my previous copy first. So I clone it. It doesn't take too long. And now I change to go inside of the directory. And here I am. And if I look using this program called less, there's environment.yaml. And the same thing we saw on the website. And we see here, this is called the data analysis environment. So I'm going to run conda in conda environment.yaml. So I will push enter. And now this is going to take a little while. The conda environment is basically like a huge collection of different software that's been distributed through this conda environment. So this environment contains various Python packages and various other packages. And distributing them otherwise would be quite hard. So this is the way we are currently doing it. Yes. So since this will take some time, I'm going to pause the video and we'll come back when it's done. So see you shortly. So we're back. It took maybe five or 10 minutes and now we've gotten here.  Well, a bunch of stuff we're not reading. And it tells us how to activate the environment. So conda. Activate data analysis. And this is fast. And we see my prompt now says data analysis at the beginning. So now let's test if we can start Jupiter lab. So Jupiter lab. So if you leave off this web browser, it will find a web browser and then start it for you automatically. But since I have a lot of different web browsers running here, I wanted to start in this window. So I do that. And I copy this link into my web browser. And we see it start it suggests to do a build. Well, why not. Let's do that. So now we've got somehow it's open this file already for me. So we see I'm in a directory and this is the data analysis workflows course which I already downloaded with it. So first we need to download the data sets. So you would come to here and double click download data sets and then this window will open. Yeah, that's kind of happened sometimes. She didn't shouldn't be. Yeah, we don't worry about that. Yeah. Okay. So this defines a bunch of different data sets and some Python code which will automatically download them. So I can click anywhere in this box and then click here, run the selected cells and it will do it. And then we see here it's downloading different things here a folder called data has appeared. It looks like it's done data and we see the data is here. So let's test it. So I go back up clicking here to the root folder. And I go to Python exercises. And we do chapter one Python exercises one. And we go here and we can do run. Or is it colonel the current run all run and run all cells. And we see there's a little asterisk here, which means that the cells running and once it runs it becomes a number. So we scroll all the way down. And we see three plots. So this work. Now we can test the our exercises, if that's what you would do. So we go back up to the root folder here. And then we go to our exercises, double click. Chapter chapter one are exercises one. I double click to open it. And I can do the same thing run and run all cells. And that's just the way you output stuff. And on down. And the plots are made. And that is it if you can get this fire then you have everything you need to do both the first day and probably every day in the course. Yeah. So, thanks for watching. See you Monday.


Hello everybody and welcome back to the YouTube video. My name is John Hammond, and I'm still showing off some of the junior CTF Capture the flag game that went on this this past weekend. So this next challenge I wanted to showcase for you was called stop thief. It was supposedly a trivial recon, but still 500 points So not too many people solved it All credit and kudos really goes to a really cool friend of mine that I met while I was playing the game that Kind of helped drag me through this this challenge. I admittedly Like a thousand percent would not have been able to solve this challenge without his help So extreme shout out and thanks to that individual Regardless, I want to showcase and demonstrate what the challenge is and consisted of it was a terrible challenge really really shitty a Whole lot of guessing and it's all in Russian, which I do not know So okay The challenge from here is as Wendy some of the stolen grunkles is you rocks? I think I know we could do it dipper really look. I found this photo I mentioned something suspicious about to find to look it up on VK and now everything is absolutely obvious Tell me who it is try to find out yourself dipper. So here's the image, which I'm assuming this X is The Xerox logo they're referring to you someone is stolen the Xerox And they reference VK in the challenge description which I don't know if you had known or not known about Before it is the largest European online social networking service, which I apparently is like the equivalent of our of a Facebook So you can go to it and I ended up creating a web an account So I am logged in Because I wanted to be able to help the search and find and solve this challenge. So I ended up creating an account for it But what you do here is Is There's some things you can do to actually translate this this Russian text out of the image if you wanted to because um Obviously you can't copy and paste this because it's an image so you'd have to type it out But you don't have a Russian keyboard so you can use like some tools Russian keyboard. I think Keyboard yeah, yeah Russian Online Russian keyboard and That could work for you if you want to type things out and you could pump them in a Google translate and stuff like that I actually have some of those files still here. I think So I'll showcase what I have cyber write-up CD online juniors CD stop thief So the sign I had typed it out took that each part of it that was visible and Won't you translate this it is photocopy a red tower per red ten which? Apparently is an address. It's it's it's a location And there's there's there's a greater hint with this too if you actually download this image So let's say this image in our juniors page our folder and if you check this out exit tool you look at the metadata for that image and There is actually a GPS position and latitude and longitude in here So if you wanted to what you could do is you could look for this GPS position in like Google Maps or Google Earth or Google Street view so that ended up actually doing that I took this Location this GPS location. I also wanted to convert it to like the agree symbol So I could actually have a real string that Google Maps would probably be able to find and look through so I copied and pasted the degrees symbol Because I don't know the alt key code for it And then we have this like little location this GPS coordinates latitude and longitude coordinates. You can you can find it You can search Google Maps for this and it will bring you not to Salem Connecticut it will instead Okay, that is East it is East my bad not not West it will bring you to 155 Whatever the street is Lenin Avenue what at 155 Lenin Avenue? I don't know if you can read that particularly right here, but this house is 155 Lenin Avenue Where though I actually try to click on some other things to determine Okay, where am I I am in Tomsk, Russia and Lenin Avenue 155 there So yeah That's the location Again, you can look this in Street view if you wanted to and you literally get an image of the house and you can see the The sign on there you can see this Xerox sign on the house if you wanted to but it's a picture of that 155 Lenin Avenue so what you end up doing is now that you have this information and Apparently if you look this up on VK you can find news like you can see if someone has actually stolen something you can look in the news section of it and This is completely obscure and again a lot of guessing that I again would not have been able to figure out without some Awesome individuals help so kudos goes to him. I'll credit for this video goes to that individual but here's what we do in VK you can search from news and And You should be able to search by news trying to get more Properties out of this Okay, I think if you go to search It should give you some search parameters. You can expand and you can look by location So you can specify That one five five Lenin Ave in Thompson Russia And ideally we'll be able to find it I honestly even just like stole one of the addresses that I got out of Google Maps And then I tried to Work with it there and zoom in on that location Because you want to have them cursor Where it actually is So it looks like it's at a fine place if you go into the satellite You could like move around the actual location. I mean a bit more again. I Actually ended up dragging this and Like zooming out to a point where I could see what the map looked like and if I changed the map You can get this house numbers So I knew I needed to be further up to get 155 right here So I just left it there and that matches What I see in Google Maps in 120 right across the street 155 right here and 120 on the other side. So I know I'm in the right place so I searched nearby posts for this and I get a bunch of things and What I ended up doing is I actually just Looked at the location that these pictures are from Because apparently you can like look and search for more images or more pictures from that location so I tried to show more pictures and We seen our photos nearby.  So I click on that guy to see if it brings me anything interesting Um, not particularly that might have been someone's random account. There's nothing interesting here There's no other information other than that image, but there are other images that I saw right? You can click on more of these and you get Pavel Volkovs, which is another individual we can look at He has a lot of photos. So maybe not for the purpose of the CTF whatever Are there any more? Click on some of these other ones Pavel again Pavel again Pavel again All Pavel what the heck? So we'll scroll down to see if there are any more I Keep showing more pictures because at this point you're I'm pretty desperate I'm hoping to see like oh, okay more pictures more pictures of the sign again Pavel I see his username of the top right here Again LMAO again Pavel again Pavel and again Pavel what the heck? Is there any more I keep looking for more pictures in this area more signs? Pavel Pavel Pavel Pavel Pavel and again Pavel This is actually the solution by the way. So like that's why I'm still continue to looking through here I don't know why I keep seeing Pavel's post but not the ones that I'm looking for though Am I going through the am I looking through the same pictures over and over again right now? I'm pretty sure VK is just like showing me the same pictures again. Oh, hey, you see some gravity falls stuff and That is Curious so I go to this individuals dipper as a 70 and Oh, he has a picture of the sign as well, and there's some Russian text here So what I did is I Google translate this and it says you are on the right track. Okay awesome so This Individual this this page their username jam underscore dipper is what the flag is You submit jam underscore dipper as the flag I Guess the challenge prompt does say tell me who is it? So I guess you would submit the username If that's the interpretation you end up having but I wish it were something a bit more clear like Oh, this is the flag or you found me. Here's the flag whatever but no The you are on the right track is it all you end up getting with the images and some gravity falls pictures So jam underscore dipper is what you submit and you get five or two points for that, but holy crap I I spent way too many hours on this with the guessing and the looking around on the Google Street view and trying to explore that that Address and then again just looking through random pictures of other individuals on on VK, so That's it Again kudos to an individual for helping me get this challenge because of what the heck This would never have been something that I would have been able to gotten on my own Not knowing Russian and not knowing VK and not knowing what the heck do I do with this picture? So, okay That's that's that's how you solve the stop thief challenge for Junior CTF, so I hope you guys enjoyed that video It's really it currently And I'll show you hopefully a little bit more some other challenges and demonstrate and showcase those in a later video So see you then


Hey guys, so as you remember, I needed to change the piston and the rod from the from the engine and to be sure that I Have the bike ready for mafia. I'm actually gonna take the engine out from the bike because the guys actually are really busy I'll actually bring the just the engine so it's quicker And see if everything goes according to plan. So let's get to it This easy and any vossner they are not losing any pistons for For the meantime, so I'm putting a meteor Piston which is kind of the same as the s3. It's not as Endurable, but it will have a better performance since it's lighter The rod is already in place as well sit here From proc and now to help a bit Ricardo to be sure that I have the engine ready.  It's the same power that he designed during. It comes out all the same. The box is good. I haven't seen it yet. But at first it looks like this. The boxes of the gas gas are very... I don't know. The boxes of the gas gas are very... I don't know. The boxes of the gas gas are very... I don't know. The boxes of the gas gas are very... Everything is small. It's much bigger. It's much bigger. Exactly. The current user is what interests them. The boxes of the gas gas are very... The boxes of the gas gas are very... The boxes of the gas gas are very... But above all, the boxes... Yes, the boxes are very... The boxes are very good. You don't have brands in any of them. Yes, yes, yes. There you go. Where is the wallet? It's in the other room. I don't know if it's there. Is it mine? Help me, please. Now the cylinder. It was already polished. It had some marks. But as you can see... It was here. It's pretty much gone. So... It's cleaning. I'm ready. It's amazing. It's running so smoothly.


The OKAPI online monitoring system was established in Germany to estimate influenza vaccine uptake among hospital staff, with questions on measles and hepatitis B added in subsequent years. Influenza vaccination coverage increased from 39.5% in 2016-17 to 52.3% in 2018-19, with physicians being more likely to be vaccinated for self-protection while nurses cited a lack of vaccine confidence, as their reason for not being vaccinated. The OKAPI platform serves as a tool to monitor and understand vaccination behavior among hospital staff, which can inform targeted interventions to increase vaccination rates. This article was authored by Julia Newfound, Ronja Wenzhel, Bert Bedecker, and others.


And he said, well, we've got anecdotes. We've got anecdotes. We're collecting anecdotes. Explain what an anecdote is for someone who's listening who might not. An anecdote is the equivalent of a story. So normally if you look at the dictionary definition of anecdote, it's an amusing story. So the difference between an anecdote and science is it's the difference between collecting data under control conditions from thousands of people and potentially carrying that study on in a longitudinal fashion for many years. So you can get like, you can track people's health outcomes and asking someone on the train how they're feeling. That's the difference between an anecdote and saying, you know, oh, yeah, I feel like this today and a scientific study that has got thousands of people, thousands and thousands of data points and statistics to, and it's been peer reviewed and published in prestigious journals are supporting the plant based lifestyle. So that's the best available evidence we have on nutrition is these big population studies. So they're like a cohort study where they either go backwards in time and track people or they follow them because a lot of people might not understand research and how it's collected and how statistics are collected and how, you know, they find these differences in health outcomes. Can you explain like what a cohort is and how like, let's just say the Adventist study, how they would do something like that? Okay, so what they might do is take a cohort, so a group of people, a large group of people, and they might want to, let's say, for example, look at colon cancer as one of their potential outcomes. So at baseline, they'll take a lot of data. So they'll, they'll get medical evidence from records. So they'll make sure that nobody at baseline has got colon cancer. They'll take measures to do with the current diet and things like that. So that's one of the criticisms of these cohort studies that some of them have only looked at what diet people are on once. And then once they start following them for years, well, people might change their diet. So that's an obvious criticism. But there are some studies that have actually consistently, consistently tested diet and got people to do not just one, a one questionnaire, but food diaries and things like that. So no, it's not perfect, but it's the best we can do whilst being ethical. What do you mean by that, being ethical? Because you can't lock people in the room and do work. Exactly. Yeah, do like an RCT. Exactly.  You guys don't have colon cancer either. So we're now going to lock you up for 10 years. Give one of you colon cancer, but through diet. And we're going to force feed half of you a carnivore diet and force feed half of you a plant based diet. You can't do that. It's unethical. So the next best thing is to track people through their daily lives, take measures of what they're eating and other that they also take into account things like alcohol use, smoking, exercising, exercise. Yeah. Other other health possibilities social sort of setting or didn't the event to study account for the most variables? It was a very comprehensive study. Yeah. So the more comprehensive a study is, the more well planned it is, the more variables that you can account for throughout the entire study, then the less limitations that study has. So there's no one perfect study, every single study that's ever been published in any field whatsoever, not just nutrition or psychology or biology, but physics and all of it. There's always going to be limitations. And that's why when authors write up papers, they always have a section in their discussion addressing the limitations and then suggesting future ideas for research, how such limitations might be overcome in the future. Okay. So in terms of cohort studies, what if you just one one cohort study that had ever been done and that was it on one population, one sample, say the Adventist study, and they'd collected it, you know, over a few years and it was just one, I wouldn't be convinced by it. The thing that convinces me is, although these studies have their limitations, what they are doing is collecting data from many different parts of the world, different types of people, asking different types of questions using statistical methods that are the most robust that they possibly can be. So taking into account lots of possible confounding variables. And the data comes together as a consistent body of research. The other thing about scientific research is that if you find what we call converging lines of evidence. So we've got the cohort studies like the epidemiological data sets. But we've also got more mechanistic data. We've also got however cruel they might be, we've also got animal studies. So we can we can look at models of how things might be playing out in the body. Yeah, mechanistic data, just explain mechanistic to people. Mechanistic data is how something works. Yeah. So because you can't look inside the body, you can't look inside the body. What you've kind of got to do is, again, it's about compromise because you can't rip people open to look at their insight. It's unethical to do that. So there's other ways you can do it. You can do in vitro studies which are in the test tube. You can develop animal models and look at animals. But mechanistic data is just how something works and tracking, like putting together a model. Sometimes it's theoretical because sometimes you don't have all the evidence. But like, for example, the role of cholesterol in atherosclerosis, that's a big thing that the carnice are denying at the moment. And they say that, you know, we should only look at the mechanistic data. But we know how atherosclerosis develops. And we know that LDL has got a role in that development. It's not the sole cause, but we know from converging lines of evidence through many years of different studies. So how can that be denied? So they can overall, in terms of nutrition, what we've got at the moment. And we can pick studies apart. We can look at the different flaws in individual studies. But because we've got replicative findings, we've got different populations, different locations, different time points, looking at a variety of different like illness outcomes, like cancer, heart disease, strokes, et cetera, et cetera. And then we've got the mechanistic side, we have got some randomized control trials, they tend to be small scale, they tend to be again flawed, but putting the body of evidence together, all of it together, what we can say is eating meat is one of the worst things you can do for your health. So you're saying all of these collectively are pointing to the same thing? So they're all supporting bits of data. And then they do something, it's a meta analysis where they analyze a group of a large group of like a few hundred studies and see if there's anything consistent. So what they do in meta analysis is they start off with what we call a systematic review of the literature. So they might want to look at all the different studies that have been done on colon cancer and meat, for example, right? So they systematically review the literature, they make sure they don't miss anything. And then if they have enough studies that have used broadly the same measures, then they can do a meta analysis. So as well as the systematic review, which is a systematic review of the literature, they do a meta analysis, which is a statistical technique which looks at the magnitude of the effect overall. So it pulls the data from all of those different studies, and it looks at the effect sizes and how strong the effects are. So meta analyses are considered the pinnacle of the hierarchy of evidence, the scientific hierarchy of evidence. Again, the hierarchy is something that the carnists deny. And I've done a video on the hierarchy of evidence, and I'll readily admit that just because it's a meta analysis doesn't mean it's good. Because there are some terrible meta analyses out there. It might be that the research area doesn't lend itself terribly well to meta analyses because the measures aren't really very consistent. Would you say that the worst meta analysis is better than the best anecdote in terms of evidence? Oh, without a shadow of a doubt. The anecdotes don't even make it on to the hierarchy of evidence because they're not science. They're just not science. They're just having a conversation. You could say anything, and that would be considered evidence. Exactly.


Hi you guys welcome to my February makes video where I show you like a little bit of a show and tell all the things that I was able to sew last month. If you saw my February plans video then you kind of have an idea where we are going or what the intention was in terms of my February sewing so let's see what I was actually able to sew all right. First and foremost we have the Sew Together 22 project which for February was like pajamas slash loungewear. Everyone made the Love Notions tranquil nightwear. You guys saw this in a Make It Monday review video where I did the little jersey knit with the lilies and the little pink and black dot kind of the asymmetrical vibe here using fabric from June and Lou. This set turned out so cute. I have been wearing it non-stop which is why I don't have it to like hold up in the video today because it's literally in the wash because I've worn it so so so so much. It really is living up to kind of all the dreams and hopes that I have for it in terms of being able to sleep in it and then roll out of bed and go get a coffee or go check the mail or take the girls for a walk and I don't feel like I'm wearing pajamas.  Okay so that was Sew Together 22. That's kind of one of my goals too is to start adding more like craft projects and more stuff like forward the dogs stuff that is useful like not sewing a craft for the sake of sewing a craft but sewing things other than clothes. I don't know if it's just because like it feels like different so it keeps my creativity going or if it's just because they're so fast that I'm able to crank out a whole bunch of them and so that feels productive but I'm feeling drawn to sewing like not garments sometimes on all the time but sometimes. So this month I made this little dog dress I mean come on right I'm gonna be doing a whole pattern review on the dog pattern that I used for this talking about the fabric where I got it it's obviously like dog themed um but this little thing turned out so cute and the best news is is that even though the dogs look to be different sizes honey is mostly hair and so they can wear the same size dress but I did have this other pattern and of course lots of that fabric left over so I made a little doggy treat pouch and the coolest part about this thing is it has little belt loops in the back so you can put it on your belt make a belt make a tie for it and so it's hands-free and then I also used a new product from heat and bond it's called like liquid vinyl and basically it's this like think about mod podge but for fabric and then you can heat set it and it makes the fabric like vinyl um it can get as thick as waterproof and all of that as oil cloth so again I'm gonna tell you guys all about that product and just sort of how it works and how to use it and all of that um in another video later this month but this is the little kind of prototype pattern that I used to see how that product worked um so but then there's this little treat bag and then you can put it on your hip and it happens to match your dress so that's like a whole fun little whole little fun little vibe we talked about this last week it is my vogue I think it's 1866 coat um out of this beautiful Italian wool plaid that I got from mood uh fully lined gorgeous like flared sleeve flared hemline um really really pretty uh little stand collar action threes fabric covered buttons and the sightseeing pockets finished this guy this month this was one of those like this took up a whole weekend but so worth it and of course the cutting and getting all the plaids to match everything was like that took a lot of time but clearly so worth it and because it's not interfaced um it's just lined it is sort of a lighter weight wool coat perfect for spring probably more so for fall with the colorway but I just used fabric that I had in my stash so but yeah this turned out really good thank you for so much for all the support on the video it seems that you guys really liked it as well so um I love when all of that happens together I love it you love it you know it works out and there's definitely been times where I've loved something and you guys universally have said no you've lost it that is not it should I say what um crinkle rayon jumpsuit does that ring any bells for anybody that's been watching my videos for a minute you guys hated that just hated it and I love it I still have it I love it I don't care what you guys say I really don't but when I love it and you love it then it's just like 10 out of 10 you know what I mean okay so I also talked about in the plans video this little um wool set that I was making with sort of like a pencil skirt and a vest vests are coming back it's very 90s the whole 90s thing is happening again it's like Rachel green 2.0 um maybe like late 90s is more of the vibe the um the vest did not get finished but I did get some of it done you can kind of see where we're going with it here this is the front and then this is the back with the little like you know tie thing so you can get an idea of what it is going to look like I'm trying to be very delicate with it because none of this is stay stitched I don't want to stretch it out this you know wool can be a little bit shifty but you can see in the front it has that little curve to it it's going to be really cute I've got the lining almost sewn I think I have like one side of it sewn or something I don't know the fabric is like I don't want to mess with it too much um so that's just a matter of a couple more hours and that will be done you finish the lining you sew them all together turn the right side out done the skirt is very close to being done as well I just have 45 000 buttons that I have to add to it so I have all those buttons marked that's what that is it repeats over here on the other side but this is that skirt oh also needs a hem and you can see there's no hem but you can get an idea for what this is going to be like cute little made from far away it just looks black but up close it has all these little speckles in it really cute and the coolest part is that since it's a wrap it really is just one piece like so you know what I mean and then it wraps around your body like I just had it whoop whoop and um yeah and you've got this cute little wrap skirt that hopefully I will be able to make somewhat adjustable that's I think why I've resisted putting the buttons on so far I didn't have the button holes done because I want to make sure that I put them in the right place so I'm excited to finish that again this is like another afternoon project and it will be done um what else is that it that might be it so made a lot of progress on those two things finish an entire coat finish an entire pajama set finish some dog clothes so I'm pretty proud that's everything that I worked on in February I would love to know what you made did you make something for someone for valentine's day um did you make something for yourself just let me know in the comment section to have a little brag sesh it's fine um and tell me what you were able to finish in February otherwise I will be back for my march plans video here very shortly and then I linked to the coat pattern review that's the most recent one that I did so I linked to that here in the insulate just click that bottom right box that you see there it'll take you right to the video otherwise check the description box for links and tons of information um we'll be we'll be waiting for you there but that is gonna do it for me today y'all thank you so much for watching I will see you all very soon bye


Join WJCT for Be My Neighbor Day Saturday May 5th from 10 a.m. to 2 p.m. At the WJCT studios, the day will include family-friendly activities, PBS Kids characters, food trucks, and so much more. The event is free, but reservations are required. For more information, log on to wjct.org slash events.