A while back, I created a horizontal media scroller that allowed us to sort of scroll through elements either one at a time or we could do groups of elements. And in that video, I got a lot of questions about having a buttons that could let us do it. So you click the button and it does it instead of having to actually scroll horizontally. And then I saw that Kyle of WebDeb Simplified already did that where he cloned the Carousel UI from Netflix. And well, I don't want to copy what Kyle's up to. It did get me wondering, could I do that with CSS only? Hi there, my front end friends. Thank you so much for coming to join me once again. And if you're new here, my name is Kevin and here at my channel, I hope you fall madly deeply in love with CSS. And if I can't get you to fall in love with it, I'm hoping to at least help you be a little bit less frustrated by it. And today we're going to try and push the limits of what we can actually do with CSS. And we're gonna try and copy that Carousel from Netflix, the UI, including the indicators showing us which sort of section we're on. Only thing I don't think that we can do is to infinitely cycle. We have to go back and go forth because we're not redoing the DOM or anything where we sort of have to do that with JavaScript. But everything else, I'm pretty sure we can do but I haven't actually done this before. It's gonna be my first attempt. So we're gonna go through sort of my thought process and I'm gonna talk my way through it. You can see how I can overcome the problems I do and all of that. So let's go and jump right in. Now, as you can see, I'm not starting from absolute zero but the HTML that I have in place is fairly simple and we're gonna have to add to it to actually get it to work. And what I did is I just took the horizontal scroller thing, I broke it down a little bit and have a little bit less going on here. But basically this is what I've done is I have these media groups and inside each media group, I've put a media element, I guess we just have images so I guess it could have just been an image but I'm gonna have this media element. So we have a media group and actually let's go and let's highlight these or we'll see them a bit more but this will sort of become a bit more obvious but it was just be boring watching me do this. So I just right now have four media groups and inside each one of those groups, I just have a whole bunch of media elements, four or five different media elements inside each one of the groups. I've also added this SVG down here which is using symbols and it's just for the left and the right arrow that we're going to be trying to grab so nothing too complex for that. If you've never seen this before, we'll explain it a little bit once I actually start using it but basically it lets us have an SVG saved at the bottom within our file, that we can then use over and over again within our file and you don't need like the big long SVG path every time that you wanna use it but we'll see that sort of as we come through. Now when I tore this down, it looks like I did a little bit too much so I'm just gonna grab all of this so these four groups, what's this closing? See, I didn't, so yeah, we're gonna grab these four groups here and I'm gonna do a control shift P and then I'm gonna right emit and you can see I have a whole bunch of stuff that I wanna wrap with abbreviation and then I can just choose a div dot, what do I wanna call this? It was my media scroller, okay. And so that media scroller is the parent to these four groups that we're gonna have in there and I'm gonna keep those claps as much as possible just to keep it nice and clean in here and we still have my SVG there, perfect. So let's come and sort of highlight how this is going to work a little bit or how I see it working. This is just generic things, so let's come here and we'll do my media scroller. And so media scroller is going to be a display of grid which when we do that nothing actually changes and we're gonna do a grid template, not grid template columns, we're gonna do grid auto flow, auto flow of column. So that should make each one of those groups actually go one next to each other. So here we have my four groups coming in and just to show that let's do dot media group and give that a background of lime green. A background, Kevin, border of three pixels solid lime green. And so we can see there's those, the four media groups right there. Now what we actually wanna do on these is use the same thing right here on these media groups. So that should bring them and put them all next to one each other. So what this is doing is saying I'm a grid and these media groups should all go one next to each other and then my media group, I'm doing the same thing and I guess we could have utility class there that would actually make more sense instead of repeating it. But this one's doing the same thing but within each one of these boxes. So then these images are all going next to one another. Now my images are slightly different sizes and I wanna make sure because of that I wanna make sure that each one of them is the same and we probably wanna do the same thing here. What we'll do is grid auto column is going to be one FR. So columns, grid auto columns is one FR and we're gonna put that same thing right here. And again, maybe this, why don't we do that? Perfect. And I guess, I mean, what we could even do for that is we could do a utility class, are we gonna say media group and they'll share all of those properties. Media group, we're gonna keep that lime green for now. Order solid lime green pixels. Orders are fine because they can go in any order. And on my, okay, so we get that. So on the media scroller only now, media scroller. So the big one, the thing that's important is actually this isn't gonna go there. Whoops. I want my grid auto columns to be different. So okay, we can keep that there and then here we'll just do my grid auto columns. On this one is one FR. So it just means all of them should be equal. On the media scroller itself, my grid auto columns is going to be 100%. And that means I want each one of these media groups. So it's making four columns. I want each one of those columns to be the size of my media scroller itself. So there we go. And it's overflowing out the side of my page. And you can see I get a horizontal scroll bar on my HTML now because it's going sideways. But we can see that the border here is coming because each one of these groups is fitting into one of those columns. The columns are at 100% and so we get that. Cool. So that's a good start. Let's fix up the inside here a little bit. I'm gonna say that my media group IMG. So should we do that? Or we'll do this to be safe. Is going to be a, I think we can do width 100% because it's gonna fit that column of one FR. And then an aspect ratio, aspect ratio. And we're trying to recreate the Netflix which I have off screen here. So we're trying to do something like this, right? So I think they follow that 16 by nine type thing. So we can do that, 16, nine to save. Of course it didn't work, media group IMG. There we go, they're all 16, nine now. They're not directly nested in there. Oh, we can do media element. Media element, I think I called it. What did I call it? Media group, media element, yes. And then my image is in there. So we'll do that, media element. Any image that's directly inside the media element, we'll get this. And then we'll do a object fit of cover just to make sure you can see they don't stretch the images that way. I don't think Netflix is doing that. They're probably using the right sizes of our images. But, and of course if we look at Netflix here, there's a small, small amount of space and they have those rounded borders on there. So let's come here and we'll say media element. And again, maybe my image could have been the media element, but if we were doing the whole thing and having the hover effects and stuff that would come on that, obviously things would be a little bit different. So let's just say the media element itself would be, I will put a border radius, border radius. It looks pretty small. And we'll do an overflow of hidden just because that lets our images keep that border radius. It's hard to see a little bit, but it is there. And we're setting up our grid on the media group. We have my media group here. We can throw in a gap, gap of it looks probably about the same. It's a pretty small gap to create that space in between them. So that looks all right. Now, there won't be any gap actually between these. Well, it's probably the same gap actually. So let's bring that gap here. Oh, no, we need it in both places. Yeah, so that means we can bring in here, gap of 0.25 rem. So that way the gap is between the elements here, but that same gap is going to be over here as well. So that sort of, you know, as we go through these different groups, it's gonna keep the spacing. I think that should work pretty good. All right, now obviously we don't want this horizontal scrolling this way. So let's come and we'd want it all the way up on the body actually, overflow X of hidden. So we can't see those now. And we need a way to get there. And this is where things diverged from how I did it last time. Because when I did this last time, we were adding an overflow on the media scroller. Here we can do an overflow auto. And then we get scrolling within here. And we get like a, I'm in Firefox, so it's hidden unless you hover, but see, we get a scroll bar that goes this way. Now we don't want that. Turn that off. I don't want anything showing me that we can do it. We do wanna actually, hmm, this might not be right. Cause I wanna be able to see the next one here. We'll play with that a little bit later. What we need to be able to do is add buttons or whatever, so we can actually click and go to that next section. And in this case, because it's CSS only, ideally that would actually be a button, but if we're doing it CSS only, it will have to be a link. And so what I'll do is I'll set one of these up. We'll set up group, we'll have to do it two times, but just to show you how it's gonna work. Or actually, okay, get it together, Kevin, focus. Each group is going to get an ID. ID is equal to, and we'll just say group one. And let's just paste this on all of them. So each group will have an ID and that's gonna allow us to move between the different groups. So then we can have a group two, group three, group four. Okay, so that's good. And then what we can do is we're just gonna try this down here. Let's throw a link. I hope this works. So we're gonna put a link to group two and let's just put the text here next and we'll fix that up. So there we go, we get a next coming in, so that's good. And if I click that, it should actually go there. Uh-oh, uh-oh, it scrolled the whole page. Okay, let's just allow us to go back. I could just refresh the page, but let's put an A and we want this to be my, it's going to go to group one, group one, and that's previous. So if I click that, it goes back. Now what I didn't think is that the whole thing would actually shift the page over. That's a problem. How do I fix, how do I stop that from happening? It's because that one actually is over. Okay, let's see. We did overflow hidden on the body, but let's take my media scroller itself. Let's turn off that. I don't want that on my body then overflow hidden X. So now we can scroll again, we can see that. So if I click next, it goes there and it goes back. I don't want the overflow there. I want the overflow, we're gonna do it here, media scroller overflow X is hidden. So now it's the same. If I try and scroll right to left, nothing's working. There's no way, there's no scroll bar coming up anywhere. But now, there we go. Okay, so the overflow is happening within this rather than the whole page. Because when I did it at the page level, what was happening was everything was overflowing on the body, everything was overflowing on the body itself off the side of the page, but it was just hiding that. So if I click next, it was going to those things that were hidden away. Now the body doesn't have it. What we're saying is that the media scroller itself has an overflow of hidden. Now I don't know why I didn't have to set a width on this. That's interesting that I didn't have to do that, but I'm glad that it's working. And now we can click next and previous and go back and forth between them. So what we want to do is I said I'll set it up for one and then I'll just copy and paste things and we'll speed that up. But instead of having that next like this, what we want to do is an SVG. So SVG, SVG. And then here I can do a use href or is it source? I don't do SVGs a lot. We'll try an href and see if it works. So use and then we're going to do, and you might see old ones where it's like, oh no, wait, is it an href? We'll find out in a second. There was an older syntax here that had the x something or other, but modern browsers all support, I think it's href. And it would be my ID of next, I think. And what that's doing is it's going to go and look for a next and here's my ID of next, which is my next symbol here. And so let's hit save and see, it worked, nice. So I love this a lot because again, it lets us reuse, this is super easy to look at and understand. And then we can do the previous. Now, because this is just a symbol it's visually there. Again, this ideally would actually be buttons and we would probably want JavaScript for this, but I'm going to come in and add an area label on here anyway of next because visually this tells us next, but there's no, if a screen reader or something were to stumble across this, there's no meaning to what this is. It's an SVG that doesn't mean anything. So we're just adding a little bit of context. And I'm not sure if anybody knows in the comments you can say that maybe an area hidden would be appropriate. On the SVG, I'm not entirely sure one way or the other. So yeah, something to look into potentially. So here we can do the same thing. This is my previous. So then here would be my SVG and then a use. We have to type it out. Use href is equal to previous, oops, previous, close use. So now if we click there and then we get the arrow there, we can go back. Cool. So yeah, I'm just going to quickly go through and put this in all my groups. Just so you don't have to watch me do that and I'll see you in just a second. All right, so now it's working. We can go through that way and then I can go back this way. Just in the last group, I only included a previous one and in the first group, I only included a next. And I just made sure to update the IDs everywhere so they're pointing in the right direction. Now this isn't like the best way to do something manually like this, obviously, but if you were using like a static site generator or something, there would be a, and you had these groups stored rather than like hard coding it this way, you could actually automate this a little bit better, right? Or, you know, it doesn't all have to be like super hard coded in this way. You could just add more media groups and have the, it should be able, you know, you should be able to build the logic in if you really wanted to. But anyway, we're experimenting with CSS. So we're doing it this way a little bit. Cool. So that's actually working now. It would be nice if I clicked on these and it were to scroll instead of snapping because it's not the nicest UI doing it this way. So let's go back to here and where I have the overflow, let's add a scroll behavior. And that should work, I think. Fingers crossed, because if not this whole thing falls apart. Ha, cool, right? There we go. Super duper. So now we can see that we're smooth scrolling between these different groups. So if we come in and look at the Netflix one, if we click on the arrow, it scrolls over, scrolls over. So we're kind of close to that actually, though I think that we've done the easy part and now it's the hard stuff that's coming. One thing that's obviously different is when we click on them, we don't want the arrows to slide with it. The arrows should look like they're always there, right? So when I'm here and my, oh, look, I broke the Netflix layer. If I go here and I click that, it slides. Yeah, and the arrows are always staying there and you can see them, they're sort of everything's sliding underneath that. So the media scroller, I'm gonna add a position of relative and I just realized I made a mistake a little bit. So I didn't give these links classes or so let's do that really fast. I'll do this, I'll just explain. I'm gonna do a class of nav link space. This is my next, I'll just do this really fast. So I'm gonna do a nav link just so it's, nav link's not a good one. Next, let's just do next and I can just combine them as a next and a previous. So then up here we can have the, this one will be a class equals, class equals previous. That's fine. Yeah, we'll style them like that, that's okay. So I'm just gonna add that really quickly to all of them because we need to select them and style them and position them and stuff. Okay, so I think I got the class on all of them and then we can style them a little bit. Just as I'm doing this, just a really fast thing of like, people ask me sometimes when I do CSS only or like, why do I try and do something without JavaScript? It's not always the most practical solution. Sometimes it's just to see what we can do and you learn things by doing this that maybe you wouldn't use in production exactly like this, but you learn how you can do certain things that you would have never have tried and then it can actually like a little trick of this big thing that you built can actually become really handy when you try and do something else or sometimes even like just being able to do this with like the smooth scroll, you realize you can do that, maybe you find a different way or a different time you might want to use that or even you know, link that in with the JavaScript behavior on the click or whatever it is. There's different things that could be uses that can come out of this stuff. So it's not just about challenging yourself which is always fun to do but it's about sort of pushing the boundaries. You go further than what you might do in production but you end up using finding things that you could use in production. So next in previous, we'll both get a position of absolute, absolute and that should be now relative to that green box they've vanished, that's okay. Where'd they go? Zed and X of just to make sure they're on top. Why are they gone? Okay, so let's just next, next we'll get a left of one or zero, pop of zero. Where the heck did it go? Media scroller, off screen right now. Media scroller, group one, yeah, group one, where is this? Okay, let's just take this position relative off for a sec and it's here. That makes sense. It does make sense that that's here because now it's for my page and then when I do position relative, it should be relative. Oh wait, I'm on group four here. It's, they're all here basically stacked on top of each other I think. And when I click that, group four, no wait, something's funky is going on. I'm only seeing the next and not the previous. So let's just, let's see if I can get my previous ones in here too, dot previous, right of zero and a top of zero. Just so, why is it there? This we should put after, just for me. Actually previous and next, that does make sense that way. With min content, we'll make them vanish because there's SVGs, width of three rim. Previous is on the right. Oh, whoops, this should be left. Okay, so at least things are, and this should be right. Things are a little bit better, but now it's not scrolling. That should be group three, group two, group one, I've broken things. Okay, one second, let's try media container. Don't like having to do this, so let's just see if this does the trick. So I'm gonna take the position relative. I don't get why that's not working. If this works, I'm not 100% sure why, but media container, position relative. That bugs me, why did that work? My buttons are mucked up, but why did the other one, and okay, the reason this, I don't 100% know why it's working, so what I wanted to do is pull the arrows. The arrows were being positioned relative to like the scrolling element itself, right? Which, Ion's collapsed everything, so they were all positioned within this guy, and I sort of, which contained everything, and as like, it worked when it was with the body and they were floating up here. So by putting the container and putting that as position relative, rather than this, that position absolute is linking to this container. So they're not paying attention to this scroller anymore, they're paying attention to this guy now, which is sort of working. Now the issue that's come up is all the buttons are overlapping each other, which we don't want, and this is where things get really tricky. But let's make the buttons look better, because that's easier, and I sort of know how I'm gonna do that. So we'll say background is RGB 000 over 0.2 maybe, because in the Netflix thing, they're kind of transparent. Let's keep, let's put some padding on here. Padding of, we'll do padding of zero and one RAM maybe. That doesn't look too bad actually. Let's turn, we can keep those green borders actually, I wanna keep that on just for the moment. That actually doesn't look too bad. I think the Netflix ones are a little bit small. Oh, they get bigger on hover, I didn't realize that. Oh, we don't have the background. I thought the background was always there, but it's not. The background only shows up on hover, huh, huh, huh. Okay, oh, we still have this guy to do too, that indicator that sort of shows us where we're, which slide we're on. Okay, I realized I was going off screen a little bit there. I do apologize, there we go. So we have to do that, and we have to create that navigation thing that's at the top there. Okay, so when we go here, there's no arrow, then there's an arrow and then it gets bigger and the background gets darker. So let's say these actually have an opacity of zero, then my media, scroller, hover, I guess we'll do media, scroller, focus. No, we can't focus on that. When we hover on the media, scroller, this won't be the most accessible thing, but when we hover on the media, scroller, so actually here what I wanna do is next and then do the same thing with previous, right? And instead of doing it, we have to repeat yourself that way. We can do a where selector or you can use an is selector.next.next previous, and that should actually work. And then so when we hover, nothing's happening yet, we wanna give those a opacity of one. Copy that, or not copy that, we just wanna move that down. There we go, okay, save. So now there we go, they show up, but I don't want them to have a background either. So here the background will actually be, or it's, yeah, we'll do zero, so it's there, but it's transparent, which is if we look at Netflix is that type of thing where when we hover on top, the arrows are gonna show up and then when we hover on that, the arrow gets bigger, the arrow will get bigger and get a background on it. So the opacity comes up. So this is selecting, again, it's selecting my next and previous that are inside of my media scroller that are on hover. And then we can just use the same selector actually and say those guys on next, where next previous, oh, I don't know if this works, I've never tried. Hover is a background of RGB 000 over point two. I think we said look pretty good. So now we hover there and then, ah, perfect, we'll make that point three. And we can also then say the hover SVG. So the SVG that's inside those links will get a transform scale 1.1. So it should, the arrow should get bigger when we hover, maybe a 1.15. And that just means, whoops, we probably want to duplicate that and here would be without hover scale is one and we can do a transition of transform 150 milliseconds then yours fine. So we can see it gets a bit bigger there on hover, maybe that we'd even do this faster 75 and make that a two. Perfect, I think that looks pretty good. So we get that same thing on the other side. Okay, so that's styled nicely. So to get it to work, this is where things are gonna get kind of weird. And if you haven't seen the where selector before, I've talked about it previously. So we'll throw a link in the description about that and again, this could also work with is, is and where exactly the same, but is this counts for specificity whereas with where this doesn't count for specificity, but otherwise they're identical. This is where things get hard because the problem now again is all the buttons are stacked on top of each other. So we just have, we're seeing all of them basically. So what we're gonna actually have to do is a display of none to make them all go away. Display of none. And the advantage of display none on this also will mean that we can't, the display none, yeah, the display none on them means we also can't like tab to them by accident and muck up our things that way. So they're not in the DOM at this point. Now it's not gonna work for the first slide and the first slide and the last slide. The first slide and the last slide might be the most problematic. I don't know, I think it's only the first slide that will be problematic actually because display none, but we need something to click on. So actually let's turn this off for a second and let's just go here to back. So we're on my first group right now and what we can do to show you how I think we can do this is I wanna use target. So I'm gonna do media group target and when it's targeted, we're going to do a border, color, border, color of red since we already have a border on there. So if I click on this arrow, see that one actually now has a red background, red border on it. So my group four has the red border. When I click that, it's gonna go really fast but it's gonna turn off the border on that one and turn the border onto the other group. So the target is when you use something within a page so you have an ID and you're clicking on like an anchor link that's going to something. That thing is the target. So I wanna take advantage of that and I wanna say that if something is the target that the, I should have used SAS on this one so I could use nesting, media group or even post CSS, something that'll allow nesting, media group, target, where, dot next, dot previous, display block. Ah, ha, ha, ha. Okay, so I have a target now because I didn't refresh the page. So we have a target of group three. So that means they're here. And if I click that, they're there. Cool, right? And now it's actually working and we, oh no, it's still not working. Why not? Why not? Where's this one going? Where's this one going? Oh, that's my mistake. Oh, did I not need this at all? One second. I know my dev tools were off screen. Group one has the idea of group one. We're going to group two. ID previous is going there. Group three, group three previous is going to group two. That's good. And why here? One second. Group four, oh, okay, that's, oh, the group four one is still, so my link here, when I'm clicking on that, I'm still getting the group four link. Why am I getting the group four link? We should have display none. Oh, I, Kevin, let's turn my display none back on. Okay. So now I was all excited and nothing had changed yet. So here's my group four. We're good. Group three, we're good. Group, it's working. It's working. We can go that way. We can go that way. We can go all the way to the beginning and we can go all the way back the other way. Perfect. So in this state, everything is good. This isn't what I was worried about. Let's turn off my background colors now. If you're a little bit confused, I'll try and explain this again. We'll turn that off and my background color border.  So what's happening is when I click, as long as something is targeted, actually let's go and look in the dev tools here. So if I look in the dev tools and we go into my media container and then my media scroller, and we have my media group, we're inside group three right now. So in group three, we have this previous link and my next link that we can see that are right there. So if I hover the link show, the link's going too far down. Why do we have that padding on the bottom? We'll figure that out after. But we have that showing up. If I come in and look in group two, you can see that these are grayed out and this is one thing I like about Firefox. They're grayed out because these are displayed none. If I come on here, display none. And that's because right now, we have group three is targeted. So this is targeted. If I come up, does it show it? I thought I saw a target somewhere. Yeah, here, media group target so that this one, this media group is targeted. Let's dock this to the bottom, dock to the bottom. So now what will happen is, if I click on one of them, let's scroll down, if I click on this, now the group two is the one that's targeted. So it switched, we're not getting any help here when I do that. Actually, maybe if we did it this way around. So let's go into this is group one or group two, yeah. So in my group two here, let's go back to this one, you can see it's grayed out. And then when it gets targeted, it gets display on it. And then when I go to the next one, it loses the target. So it's now a display none again. So we're only showing the arrows for whichever one is the current target. And that's perfect. It's all working, but I have a big, big problem. And that is, if we're on our page and there's no target, then we have nothing that we can go on. So what we could do is say, because here what we did is we did our display none. We need the first one to actually be display though. So if I say media group first child, so we're selecting the first media group, and then we could say the where next comma dot previous can be a display block. So it's not going to do it for the first one. And that means the first one now has this. We can go that way, but it's always going to be there. So even if I'm a group four, this is still here. And if I click it when I'm on group four, it's going to bring me all the way back to group two because that button is always there. And that's a problem. You'll see solutions with these types of scrolling type things using radio buttons. And that's because it's a little bit easier to control or check boxes, probably radio buttons. Because as soon as you click one radio button and deselects the other one and you can have the first one selected, maybe that would have been a better solution here, but I didn't do it that way. So we're going to figure it out though. We're going to figure it out. I think, I hope, but I don't know what to do yet. So I want to fix the spacing and stuff here. So let's just, I'm going to do dot media group. I'm going to put the border on there again, border, one pixel solid, I'll just blue for now. So the media groups are okay. Media, scroller, border, one pixel solid red. Why does my media container, border, one pixel solid yellow? Why is that not even showing up? Oh, okay, but why, oh, okay. So I did a top on these, but I didn't put a bottom. And I guess I should have put a bottom. And just to show you, actually, let's just put background red important just to make sure that it works. Of course that's not, oh, it's my previous I did that. There we go. So you can see it's sticking out the bottom. It was really subtle, but I could see it doing it when I was hovering. I could see like a darker a little bit. So to fix that, I think if we just do a bottom of zero, it fixes that, but the SVG doesn't look centered. So we'll do that for now, bottom zero. Can we just do a display none? So here I'm just gonna do an align items center. And here instead of a display block, we'll do a display flex. I'm guessing that worked. Let's put that back to block. So I'm gonna hover, save, they moved down. So yeah, I guess that's working. Whoops. Oh, look, you can see they're not, I'm getting two, you can see my double buttons there actually. Because that other one that still hasn't gone off doesn't have the display flex. So we'll throw a flex here. Interesting display flex, its outer value is still display block. So it's gonna behave exactly the same way. Display flex only changes the inner value to display flex. Okay, they look a little bit off center, but we'll live with that. Before it looked too low, now it looks too high. I don't know. Okay, so that's fixed at least to turn off all those. The next thing I wanna do is I wanna be able to make sure, like in the Netflix one, we can see that there's more coming. I think if I go to my media scroller, say I do padding of two rim. And now my arrows are, yeah, okay. So maybe one would be better. Oh man, what did I set my width to three? Is that working? Apparently. Because what I want is now every, oh, because of this, one second. Yeah, so if I do padding one, one and a width, but it should, yeah, that's fine. That should be three. So here, I'll talk my way through this in a second. Padding, padding, padding, padding. First that should be like zero top and bottom, right? Zero top and bottom, and then three, but that's way too big. How is that three RAM here? And then that's happening here. That's refresh the page. 1.5, I'm so confused by these numbers and why they're not, we're getting one, two, three, four, five, and then we have this one. Is it because it's split? I'm so confused, but whatever. We'll figure it out. Perfect, because you can see it's not lining up the way I'd want it to. Oh, maybe that's the issue too, is the way it's lining up. That's the padding on the media scroller. One second, what if we did a scroll padding inline? So inline's gonna be left and right of the same thing, 0.75 RAM. Okay, and then we just do like a full refresh. There, okay, so yeah, I was wondering why we weren't getting the space here. The scroll margin inline should help. If I take this off, it's still there. Okay, hmm, okay, whatever. We're gonna fix things in a second. Let's stick with this, two RAM. If I click there, see how it doesn't like line things up properly? And this, I think, should help everything line up. Let's start that over again. So here we have that space. Oh no, no, Kevin, padding, not margin. Okay, let's make that two. Two, two, oh, why? Okay, I don't, anyway. There we go, that's more what I want. Cool. So now it's giving us that padding on the two sides. I was using margin by one and padding. So we're getting like two RAM of padding here, two RAM of padding there. And actually, I guess if we make that three in three, it should line up more with how I had my buttons originally set up. So we get the three there, and then yeah, okay. So this three is helping everything line up with the three that I had on the button. And so that covers exactly where that other one was. And so then we click that, and then now my buttons always line up on top of the other ones similar to what Netflix is doing here, right? So the button always lines up with the one that's there. Cool. So that's done. And it works. Cool, cool, cool. Okay, I'm pretty happy with that. And we have this problem with the button that goes nowhere, but. Let's bring in those indicators and then we're gonna try and solve that last problem. So for the indicators, we're gonna come all the way down. I need to be media group previous. I'm just trying to think. We have my media scroller. Do we need to be inside my media scroller? I do believe we do. So if we need to be inside my media scroller, we wanna be here. I'm gonna do navigation indicator, indicators. And then in here, this is really visual only. So like I'm not, we're just gonna div times four because we have four groups that we're going through. We'll just do it like that. Nice and simple. And so here, let's do that. We'll do my navigation, indicators. So let's just make them appear first. So position navigation indicators first. And we need navigation indicators star. Just select everything inside of it. These will get a width of, let's go look at Netflix. They show up the width is maybe one RAM. The height on them is probably three pixels. And a background, we'll start with white and we'll have to change that. But we'll throw white on there for now. Or actually we can probably keep that. They should be somewhere on my page. Oh, so here on this, let's do a position. Position, absolute. So they're there. They're showing up here now. I wanna do top. Oh, top, I was gonna do top zero but let's do top negative two RAM. There where trending now is. And then we'll do a right of zero. And they're all the way there. Let's do a two RAM. Cool, so they're all there which is roughly where I want them to be. But now we'll throw a display flex on them. So they go next to one another. Gap of two pixels. I think the height's actually too big. We'll do a height of two pixels. I'll make this three just for, space them out a little bit more, because why not? And what we'll do is we'll get it working and then we'll get it to only show up where we, when we want it to. So here we can actually say this is an opacity of zero. No, opacity, let's just do point five. We're gonna make it really stand out at the beginning. Okay, now is where the weird selectors. And this is where SAS really would have shined because I could have used a for loop to create this. We're gonna do, no, media group, media group and then navigation indicator. No, indicators. I should have given them a class, whatever. It creates a longer selector, color background. Just, this should actually change all their backgrounds to red. There we go.  So they're all red. Now what I actually wanna do is media group and, oh man, I just realized a problem. Maybe it's not a problem actually. We'll see. And child of two, target. So if the second media group is targeted, they should change to red and then turn back off. Cool. And then this is where SAS really would have been nice. If I take the same thing, and it's child, target two, and then I put that on this and take off the target. When we go on the second item, it will be red. So when the second child is a target, any sibling, like you can see the plus one used a lot. Plus means whatever follows directly after. Whereas this is, the tilde is any navigation indicators. As long as it's a sibling, it doesn't have to be a direct sibling. The plus is a direct sibling. The tilde is from here on out until the end of the parent, select anything. So we're selecting, we're grabbing our navigation indicators and then we're grabbing the second div that's inside of there and changing the background color. So a SAS loop would make this a little bit easier, but we can do this as a one, two, three, four. And then just here becomes, whoops, one, two, or one, two, three, four, and then the same thing. Should I just turn off word wrap here for a sec? One, three, and four. So now it follows. Cool, right? So that would just become, here we can just do our opacity of 0.5 and then for all of these, we'll just select the whole line, opacity becomes one. And now, cool. Now we've run into the problem though again is if there's nothing that's being targeted, that doesn't highlight the first one, which it shouldn't, but we'll fix the, this is gonna be an opacity of zero. And then we need that same hover thing that we had here. I'm just gonna do it here, media, scroller, hover, media. I don't know, I called it navigation indicators, gets an opacity of one. So we don't see it. Oh, whoops, this is on the wrong thing. Opacity of zero. So it's gone, but then when we hover, it shows up. I'm also gonna move this down a little bit. So it's a little tighter, just so it's a little bit. I think it's, there we go, my sizing. They're not the exact same thing, but it's the same idea. There's no indicators on until I hover. And then obviously in my case, it switches immediately with Netflix, it does it after, we're not using an animation or anything. So this is with CSS only, I believe is the only way we can actually do it, which is, you know, I think it's good enough. Okay, so that's done. Now we want to fix the problem with that when nothing is selected and when this button is here. How can we do that? For this, I think what we could do. Oh wait, maybe, can we do this? Let's see. Could I say media group, media group not target? No. What I wanna say is, if nothing is targeted, the first one should be activated. If nothing is targeted, the first one should be activated. Only the first one. Only the first one, if nothing is targeted. So, okay, we're gonna try, if we do media group not, can we do not target the border, two pixels solid red. So you can actually see these two have a red border on them now, because they're not targeted, but as soon as they become targeted, it loses it, but it stays, so okay, we can target, we can select something that's not being targeted. So now, if nothing is targeted, they all would actually have it on. So media group, if nothing is targeted, but I can't say media group not target for looking at all of them, and then choose the media group, like the first one. I can't choose the first child once I've targeted all of them, and I need to look at the other ones to know if the first one should have it on or not, because if not, so say we did this. No, there's no way of saying, oh, unless we did media group, no, because again, I can't say media group second, third, fourth, not target. First one gets this styling. I'm gonna cheat a little bit. Yeah, I think we're gonna cheat a little bit. It's not cheating, it's part of CSS. We're staying CSS only. But I'm gonna open Chrome Canary. In Chrome Canary, I'll put a link to it in the description, there's this little guy here, and I would just have the, me do do do, oh, it's not there. I was hoping it would be in the experiments, but we can go to, let's Chrome flags, and experimental web platform features, just make sure it's enabled. And if it's enabled, you get the, if you're on Mac, you can use Safari, and that's, you don't need to do anything. It's in Safari, it's fully supported in Safari, and that's has, the has selector, because I think, I haven't done, I've read about it. Okay. Media scroller has, let's just see, has, what do we wanna see if it has? Has a link in it, or let's do has previous. Previous, yeah. We'll get a border of two pixels, solid, lime, green, lime. Oh, of course, it's all getting it. Let's try that with media, media group. Okay, it's working. So does my media group have a previous link inside of it? The first one does not. So the parent is not getting a border on it, but all the other ones are. So, okay, has is working, that's good. Now let's just double check, but I'm pretty sure. We're just in Firefox, right here, pretty sure. It's not working here, yeah. We're not gonna get it there. So the browser support on this solution is not 100%, but we're gonna do it with CSS only. This is why has is gonna be fantastic. Okay, media group has, so we want the media scroller. So media scroller has a target that is not the first child, does that work? So if this works, when I click, we should get a border around it. Ah, oh, it worked. And now it, ah, even if we get to the first one. Oh my goodness. Look at that becomes targeted, the border comes on. That's a weird little delay there, no border. Is it, it's so weird if I'm here, it's only when I hover off that the border comes on, but whatever, it means it's working. Ah, this is cool. Okay, so if the target is not the first child, we can do that. Now, does that help me in the situation? No, but we can just say not, not target. Does that work? No, not target. So nothing, but we have a target right now. What's wrong with this? It's giving me syntax errors, but I think we're okay. Has, not, my not is here, and then we're closing the has. I think we're okay. What if I just put star here? Okay, it likes that better. So let's say we have no target, let's see what happens, refresh. No target, we have the border. Oh no, not, I just want not, that's not working. No.  So if the target is not the first child, okay, and this, let's turn word wrap off because it's kind of weird. We can actually select things here then. So then I can select my media element first child, I think. No. Okay, wait, let's turn this back on. See, that was working, right? Isn't it when we did this? Okay, yeah, okay, so that's working. So then if we say media, let's just say media group, media group, okay, so they all get it. Media group first child, target is not first child. I feel like we should be seeing a border there that's not happening. I'm in, okay, we are, I was like, did I go back to the wrong browser? So this media group, I should be able to do that though. First of type. Oh, it wasn't first child I wanted, it was first of type. Okay, so this is gonna let us solve this problem where this stays on.  Media scroller has a target that is not the first child. That first child that we're talking about, the media group first of type, so I mean that could come here, that child where is the where, or we don't need the where because we only have a next button. Where.next is a display of none. Like even prettier is like, no, you can't have a selector that long. Okay, so now we're here, if I click here, it disappears. Yes, and then if we come back this way, it's perfect, oh my goodness, it worked. Okay, and then can we use that same type of thing? Okay, so it's, if, so let's make sure though. Yes, it's working, okay, so because this one's working. So if there's anything targeted inside the parent that is not the first child, we turn off this arrow, it gets a display none on it. Yeah, perfect, okay. So that means, because we had to have that on when nothing is targeted, so we turn it on all the time and then we turn it off as soon as something in here that is not the first child is targeted, because that means that was the problem before. Without this, when we come back to here, it would turn off this one because we'd have a target in our group, right? Let's go find that original thing we did. Where's that target that we had? Here, we did, like they have display none and then we're saying like, when, however, no, where was it? The target thing we did. Oh, here, there, we'd be turning it on when that media group was the target and that meant that, I don't remember what it meant, but I remember we were stuck with it not being there because we had to turn it off and on anyway. That solved that problem and I'm wondering if we can use that same thing. Now this isn't the wrong spot. Navigation indicate whatever. We can clean this up another time. I'm so excited by that. Navigation indicators, so we wanna do the same thing. If the target, this whole thing we wanna grab. Oh yeah, it's just this, these, okay, we'll move this out of the way then because that's not where that should live. That shouldn't, we'll bring that up here. Okay, then my navigation indicators. So we want this selector again. Navigation indicators, star and then we're sort of turning it on based on which one is the target. But then we can say that the first, so when there, no, but we don't want that. Can we just say not target when there's no target, not target, the first of media group, not media group, the navigation indicators, this guy. Okay, so we can just combine that here then. We could say it's the exact same style we want on it.  We need this whole thing, that, there, okay. So that means that if nothing, oh no, this is targeted, no target, okay, good. So if nothing is targeted inside the media scroller, my first navigation indicator is going to be turned on.  Why is it still turned on? When media scroller has no target is basically what we're saying there, opacity becomes zero. So why is it still on? Let's just come up to my media scroller and put a hover on and then choose this first guy. Media scroller has not target. It's not working as intended for that one for some reason. Navigation indicators and child one. Media scroller has not, how come that works here? Has target not first child? I don't want to say has target not first child. I want to say has, so let's just look at it again. Has target not first child. Oh, can I just do this? That's effectively the same thing we just had. But then navigation, so the first child's just on. Media scroller has media group target. Oh, oh wait, oh yeah, okay. Then, oh wait, let me just do something on do a little here. I might know why it didn't work. No, it was the right thing, okay. I thought I made a mistake in my selector. Navigation indicators and child one is opacity of point five. Is that gonna work? Okay, that works. There might be a better way to do that. But basically what we're saying is they all have an opacity of point five. And if anything in here, so if the media scroller has a media group that is targeted, the first one gets an opacity of point five, and then I'm just using the cascade here to overwrite that with this one. And saying, except if it is the first one who's targeted, then we get the opacity of one on there. And then it works. So that might not be perfect implementation. I'm still really not used to the has selector. I haven't done very much with it. Maybe there's a way of doing this without the has selector, but I can't think of what it is. If you do have a solution to that, please let me know down below. I really hope you enjoyed this video. If you like this type of thing where I build things without any prep and I sort of explain my way through it, then I have a playlist right here of other videos I've done just like this one. And with that, a really big thank you to Jan, Johnny, Stuart, Tim, and Doug for being my supporters of awesome over on Patreon. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.


Okay, hello and welcome back to Ask an Archaeologist. I'm Sarah Kanza, the host of this afternoon's show. And Ask an Archaeologist is a series of live stream interviews co-hosted by the Archaeological Research Facility and the Phoebe A. Hearst Museum of Anthropology that we're putting together for Cal Week 2020, which is this week. Each day, this week at 11 at two, we're interviewing a UC Berkeley archaeologist and answering audience questions. So before we start the interview today, I wanted to let you know how you can ask questions. If you open a new browser window and go to sly.do, which is S-L-I-dot-D-O, and you can type in AskARF, A-S-K-A-R-F, and click on the Join button. And there you can type your questions and we will see them and ask them later on in the interview. And I'll remind you of this part way through the interview as well. So this afternoon, we're happy to have A.J. White with us who is going to talk with us about what we can learn from studying ancient poop. A.J. is a third year graduate student at UC Berkeley and he uses a fecal molecules to reconstruct ancient population changes. He's also interested in how climate change has impacted people in the past. He has worked in Egypt, Vietnam, the United States, Jordan, and he is currently working in his living room. So welcome, A.J. And we're delighted to have you. Thanks for joining us. So I'm sure the burning question on everyone's mind is how did you get into this particular area of research? Yeah, it wasn't something that from day one, I was like dead set on it. I think in archeology kind of have to keep an open mind for what opportunities are out there. And when I started grad school at Long Beach State before coming to Berkeley for my master's in geology, my advisor there had said, hey, check out this cool paper that uses fecal molecules to reconstruct ancient population change. What do you think about it? Do you think this is something that maybe we could do? And I thought about it and I was like, you know what, there's like a huge kind of emptiness in terms of like what we can do with poop and archeology. And I mean, for a long time, people have looked at copper lights, which is essentially fossilized poop or incredibly hardened poop. But there hasn't been a whole lot done on the molecular level and looking at what remains when everything breaks down except for a small amount of these incredibly persistent molecules. And I just thought, hey, that's like a huge kind of place that we could go and check it out. And we tried it out at a place called Gehokia in Illinois and it worked really well. I've since then tried it out in Jordan. It's been a little not as well, but we can get into exactly why that is. And I think it's good to talk about, you know, why some things work and don't. But yeah, it's something that kind of fell into my lap and I'm glad it did because I think there's a lot of things that we can do with poop. I think that's fascinating because, you know, when we think about archeology, we think of all the more, you know, the finds that are more harder, like bones and pots and that kind of thing. And we don't think of the molecular things that you could study. And that's much more recent research that's being done. Can you talk about how do you find these traces? Where do you find them? Do you have to find an ancient toilet? Do you have to go to a place where you know people were going to the bathroom or are these things everywhere? How does it work? Well, yeah. So don't think it's super gross.  Just, you know, just getting it. It's not like that. So we're talking about poop that has almost completely gone away. And the way to imagine this is that there was a time before toilets, right? And there's a time where people were mostly practicing what we call open defecation, which means just going out and doing their business like you're camping.  And after it rains or something like that, it'll break it up into little tiny pieces. And a lot of those tiny pieces will get eaten by microbes.  Just like we find all of poop unattractive, microbes find a little bit of it. These very complex molecules that are very rigid, in particular, they're the breakdown product of cholesterol. And as you all know, cholesterol is something that's hard for us to break down. It gets, you know, caught in our arteries and causes big problems. So the same idea. It's very difficult to break down. And so they just leave it. And so it's a molecule that in the specific molecules called the prosanol. And it's something that, because the microbes don't want it, it just lasts in nature for a very long time. Now it's very hard to kind of, if you were to just go out to an archaeological site, it would be in this is an area where, you know, before toilets, which until, you know, that was actually much of human history until like the past couple hundred years, really. It would be hard to just guess where people went to the bathroom, right? You know, you'd be very lucky if you just put your shovel in and that's where you found these molecules. So to get around that, we target areas where these might have collected after being washed away by rain. And so if you're in somewhere where there's like a lake nearby, that's a catchment. That's an area where stuff naturally just gets deposited. And so we target lakes, wetlands, low places where the idea is maybe only a small fraction of what was originally in, you know, one stool will make it in, but it's still something.  And then you can look at how much of these molecules are present at any depth. And the idea is, hey, you know, if we have more at position X and it's more than position Y, that probably means there are more people here. And if you're lucky, you can tie that into, maybe there's a migration story in the area.  That's when people came here. Or maybe it's the opposite. Maybe you can see where people leave. So yeah, that's the idea. It's not actual poop. It's very specific molecules that might accumulate in specific environments. Great. And so I know you had a recent paper that came out in an antiquity, American antiquity. That's correct, yeah. Yes, that about your work at Cochia on this. Could you explain a little bit about how, what that looks like? Sure thing. Yeah, so we first went out and, you know, went to Cochia. And by the way, Cochia for those who aren't familiar with it is like one of the biggest archaeological sites in this country. It's home to dozens of these monumental mountains. And to make dozens of monumental mountains, you need a lot of people. So it's thought that this area was a city that, you know, maybe was home to several tens of thousands of people. And what we did is we went and right at Cochia, there's a lake and we collected sediment from that lake and did the process that I just explained, you know, identifying where these fecal molecules are in the mud and then trying to link that back to the population at Cochia. And I did what I think 99% of most archaeology in the area does, which is I immediately went to what's called the Mississippian time period in terms of where my brain went. And that's the time period where most of those mountains were constructed when much of the people were there. There's a whole lot to say about it. And there's really great research. If you're interested on the Mississippians, you're gonna have a lot of fun learning about this stuff. It's totally fascinating. But the thing is that there was stuff that happened after the Mississippian time period that very few people have written about. We know for sure that there was an indigenous presence in the area at the time of European contact because the French missionaries established a mission at Cochia, like actually on the site. And there's almost no archaeological presence of this, very limited. And there's no archaeological evidence that's been put forward of to where the people that were living who were to be associated with this mission. And it must have been enough people to justify going all the way down there and building a mission. So we know there's a substantial amount of indigenous people around this area, but there's very little research about it. So what we did is we said, hey, we don't have archeology, but we do have this fecal, stand-up population reconstruction. And it doesn't just disappear at 1400 AD. There's 300 years of additional demographic changes. It looks like we do have a low period after the Mississippian occupation, which is what everyone talks about. But around starting around 1500 AD, the population numbers from our data seem to go up modestly, not a whole lot, but they go. And the idea is maybe that's when we start to see the movement of this population that was present at the time of European contact, which we think is probably a group of the Illinois Confederation who were called the Cahokia, and that's how Cahokia got its name. And so we're able to kind of tie that into this whole very under-discussed aspect of the local history. I mean, it's generated, it's one of those things where like, how much can you say without archeology? And I'd like to say that you can. There is a story to be had, even if we don't have stuff that our eyes can see in the ground. There's stuff in the ground that we can't see that still leaves a record. So that was kind of the fun thing about, you know. And can you explain why there isn't archeology during this time when there were actually people there? Yeah, I've tried to. It depends on how much you believe me. What my interpretation of this is, is that the two different indigenous groups that were present in this area at different times, the Mississippians under the traditional period of Cahokia. And then those came after, which are likely the Cokia, which is a member of the Illinois Confederation. It's very confusing, I'm sorry for that. But they had very different lifestyles. And so during the Mississippian period, this was people who were extremely sedentary, so sedentary that they were building, giant mounds that were as big as the Great Pyramid of Giza. In terms of their base, it's not their height, but the point is it's big. And you compare that to the Illinois peoples and they were mobile, they were semi sedentary. So they'd go on these long bison hunts in the summertime, where the groups would get together and it'd be this big outing. And the point is they're not where they are for the rest of the year. And so maybe there are big camps that are being built in the fall and the spring and the winter, resources are more scarce. People would go off to live in small family groups. When you're in the winter in a small family group, it's just maybe eight people, I'm gonna guess, a small number of individuals, they're not producing as much archeology.  And so Mississippian stuff is obvious. It's a giant mound, you're gonna find it. Stuff from the later time period might be a little more subtle. And I think it either is stuff that hasn't been found, it's stuff that's been destroyed by a fair amount of post 1900 just expanse. This is right outside of the city of St. Louis. So there's been a lot of just highway building, housing development, stuff like that. And finally, I wonder if some stuff that might be from this time period has been dated Mississippian just because if you don't have diagnostic artifacts and you find a small scatter of a chipped stone, you might think, oh, well, everything else is Mississippian, I'm gonna check the box from Mississippian and go on with your survey. I mean, that's super, I can't, that's just speculative, but I wonder if there might be a little bit of this kind of little recording bias going on. So yeah, I mean, I could go on with my theories, but that gets the idea across. Yeah, yeah, well, let's pause for a sec to remind listeners on YouTube that you can ask questions by going to slido.sli.do and typing in ask arf and you can pose your questions there and we will see if AJ can answer them. But in the meantime, can you talk a little bit about how animals, do they produce this too? And can their poop get in the mix and mess things up? Absolutely, so what I just told you about, this whole method is relatively new in terms of using these molecules for population estimates. And there's always a point where the method's looking great and then everyone kind of realizes, okay, here are the imperfections, here are the places where it kind of has a fair amount of limitations. As one of them is what you just mentioned is that humans aren't the only ones that make these molecules. Now, for everything that I've seen in the literature, humans make a way more comprosonal than anything else on the average of 10 times as much. But there are certain animals, they tend to be large domesticated animals that we've tested, things like sheep and pigs, cows make a little bit too, will produce a little bit. And so the point is, how can you tell whether you're dealing with a city of cows in the past or a city of people? And there are certain kind of ways around this and in Cahokia, we were able to kind of make the argument that, okay, this is before European contact, there's no large draft animals in the area. The only domesticated animal is probably gonna be a dog and dogs we know make almost, they don't make any actually. So carnivores don't really seem to be making this molecule. So we can say humans are the big animal on this landscape. And whatever is being produced, there might be a bear that goes by occasionally that makes a little bit of it, but we're gonna be pretty sure that this, whatever controls the changes is people. Now, if you're an area where there's a lot more animals that are present, that are particularly domesticated in animals like those I just mentioned, then it becomes a lot harder to pull apart the human and the animal signature. There are ways of doing this in terms of looking at more molecules, particularly bile acids and looking at various ratios of these different molecules to each other to say, if you have this number here and this number there, it's probably a pig. And so there's ways to get more specific, but you can't completely be 100% certain that everything you're seeing is human. And we're raining this problem a little bit on more recent work that I'm doing with my advisor, Lisa Maher here, Berkeley. And we tried this out at her site, which is in Jordan and it's very old. It's about 20,000 years old. It's amazing archeological site. It seems like there's a lot of people there. However, since there's been a lot of people there 20,000 years ago, there's also been a lot of camels there that have just been going across the desert. And so we were wondering, does camel poop contain some of these molecules too? And could that contribute to what we're saying in the sediment?  So what we think is happening is that over time, their poop is broken up and kind of percolated downward into archeological sediment. And it makes it really hard to distinguish what's going on with people and animals. It's a real mess. And so what I hope to do now is kind of go out and say, okay, here are some of the limitations. Here are some of the places where I think it works really well. I think if you're like on an island, somewhere where you know exactly what's coming in and out, I think if you're in the Americas in a pre-contact setting, it might be a pretty good way to do, but in the old world, it's a little more complicated. So yeah, that's what we're getting at, that there's a lot of limitations to be discovered and we're kind of getting into that. And so how old is this approach? I mean, what does your research community look like? What's the size of, do you go to conferences for people who just do this or is this a really emergent? It's just the men's restroom. Not in any conference, no. Anyway, so what we do is, where this all started was in the 1960s or so, people started using a proxyl for sewage contamination studies. And they still do this today. If a pipe breaks near a port or something or somewhere where people go swimming, they'll go out and test the water. And if they find Caprosna, it's like, okay, no one goes swimming in this water, there's been a sewage leak. And so that's where it started. And then archeologists beginning around the 90s realized that this molecule doesn't just indicate modern sewage and modern human waste, but also is a molecule that can persist for a long time. And so they started first using it as like an indicator of a human presence. And so particularly for pooping, so people used, okay, let's say you've got an ancient fortress and you wanna know where people went to the bathroom. If you find an area where you just find a ton of these molecules, then you've found your bathroom. And so it was stuff like that. So there's studies from Roman forts that were finding where the privies were. It was used to try to find out where fields were maneuvered and other fields were not. But in terms of using it as a population indicator, that didn't really start until 2012. As far as I know, that's the first paper that went out and said, hey, we can use these as a way of telling how many people were here in a kind of relative sense. So in terms of population, it's less than a decade. But the whole thing has been around and there's a kind of cool history to it. And yeah, and the fact that it's still used for finding sewage pollution, it still goes on just as it has been for 50 years. So when you talk about like finding it in different parts of the site, say, I know this isn't necessarily the research you do, but if we were out of Roman fort or something, what kinds of tools would you use to sample areas? I mean, what kind of controls need to happen during the excavation to allow you to do your work? Yeah, I always joke that's good to wash your hands. Just because, yeah, you never know what sort of contaminates you might be bringing. We're dirty people as this whole outbreak has shown us. You can never be too sure about what you're carrying with you. But yeah, the first thing is, yeah, you don't want to contain anything. You don't want to be eating anything that has cholesterol and be touching anything with that. So if you just had like a pepperoni pizza, not a good idea to go out and do your sample. But let's say that you got, I wear gloves on and I'm in the field. And if you're not doing it, the approach we talked about before, which is you go to a lake, right? So if you're in an archeological site, the way we've done it is much like any sort of excavation where you have your profile, your sidewall or what have you, and you can pick depths that you want to sample. And this isn't anything you can see, right? So you just need sediment. Typically we fill up, at least for what I do is fill up one of these is about maybe 15 milliliters or a volume of sediment. And from that, we don't need a whole lot because we're gonna take what the sediment is and we're gonna go take it back to the lab. And we do what's called a solid and liquid extraction. And so you take the dirt that was in here and you want to get it into a solvent that will strip out the molecules you're interested in. And now it's out of the mud and it's into something liquid that machines can deal with. And then you do several controlled chemical reactions to further isolate the molecules you want. And then you put that in mass spectrometer, which is an extremely sensitive instrument that can tell you how much of these molecules are present to the nanogram. So you don't need a whole lot. And in terms of the sampling procedure, it's pretty simple. The analytical procedure is a little more involved. That's the part that takes the time. I see. And so it sounds like carnivores don't produce any trace of this, but herb ores and omnivores do. And so can you, is it refined enough to be able to tell like if there's a human population that is eating more of one type of food or more meat or more plant material, can you actually distinguish that from them? So I'm gonna break your question into two parts. The first one is that I don't think we have enough data yet to make, and I kind of, this is my fault because earlier I said all carnivores don't do this. The problem is we've only sampled, as far as I can tell, perhaps under 50 animals, specifically for this that I'm aware of. A lot of them are ones that we can easily get our hand on. So Steph, if you go to a farm, just sample everything there. So there needs to be, I think, just a lot more survey of just what the different of the animal came to, to find out, okay, well, is it true that we can say carnivores in general or am I just basing that off of the dog, which in that case I'm, so I think we need to expand the amount of animals that we're studying, but then let's say that it does pan out where there are differences based on these kinds of diets, right? Yeah, it might be possible to look into that. And I think it would be difficult because it would be a trade-off between, let's say you had someone who is ingesting very little cholesterol, so conceivably they would produce less coprostinol, right? The byproduct of the cholesterol breakdown in our guts. However, that might look that if you had a hundred of that group of people, would that just look like 50 people who were eating more cholesterol, right? Because it's not like there are multiple variables here. And so it would be difficult to pull apart whether it means more people or a different diet. At the moment, the assumption I make when I do these studies is that people have a similar diet through time. Of course there's gonna be differences in there, but you have to kind of choose some sort of assumption in order to make interpretations, otherwise you're just gonna say, ah, there's too many variables and leave it there. But one thing I've joked about doing and I actually might want to seriously do this is actually try that out myself and have these different diets and then just test what comes out to see if there are noticeable differences because one thing that's good to keep in mind is that we produce cholesterol as well. So no matter how vegan you are, there's still cholesterol in your body. Otherwise you'd be just a bunch of jello because you need cholesterol in yourselves to have structure. So we make cholesterol anyway. So it's complicated. I'm not sure if that completely answers it. Now it's fascinating to hear about this new area of research and I'd love the idea of being able to see beyond what's actually in the ground, what's being excavated and to be able to do these types of analyses. A listener has asked what's your favorite project so far working in this field? Gotcha. Well, I've been very fortunate to do these fecal stand-all analyses in multiple places. In Vietnam, we did a really cool project on an island and looked at sort of the timing of when the greatest populations were there. In Jordan, we've learned a lot in terms of the method but I'd say that in terms of what has, I'd say produced to me the most interesting findings is from Cahokia, what I was talking about earlier. And one thing we haven't talked about is that from the Cahokia study, we were able to say, okay, in our sediment core, here's what's happening with the fecal monkeys. But we're also gonna say, okay, well, what's happening within the environment based on what we have in this lake mud because we can see things that were going on environment just by looking at the mud with our eyes. There's like a very obvious mud and it looks like this real gray pulse of silk that just shows up and right after that our fecal molecules start to be in decline. Now, in addition to that, we sampled the mud for oxygen isotope analysis which is a way of getting what rainfall was like in the past. And we also find that around the timing of that flood it seems like rain started to change and it became drier during the growing season in the summer, which would be a big problem if you're making, if crops are much feeding your people. And so it seems that climate change was happening and it was having some effect on people living in this area, in addition to what was happening in their society and completely cultural realms as well. So what I really love about that is that I think we've been able to make a really clear sort of argument for how the environment and people go together through this method. And I think it can be quite powerful and I hope to encourage people to try this method out for, among other reasons, just that, that you can really connect the climate and people in a way that it's hard to do other ones. So I've really enjoyed making those interpretations and being able to pretty confident about them. Well, that leads nicely to another question about what people on archeological projects want to, should they all be doing this?  And how would they go about that? Is that something they could do? Yeah, so what I feel like I'm learning now is that this isn't necessarily a method to just be applied universally to every single archeological site, due to the way that this molecule preserves and due to how other animals can affect its interpretation. So I think that if you're an archeological site and you've got a nice like wetland nearby, that's an area that, go get a core of it. And sometimes that requires specialized equipment and training to do. But if you have like a nice sedimentary archive right by your site, that's going to be an area where you can be pretty confident that the stratigraphy is real and tap, there hasn't been a lot of disturbance, things are gonna be in there. The problem with archeological site is that it's core of sediment a lot of the time, right? If you're dealing with sands or silceve and stuff where stuff can mix around. What I think was happening at our site in Jordan is that modern or near modern molecules are percolating into archeological sediments, which makes a real problem. So if you have somewhere where it's nice and tight in like a water blogged area, I'd recommend it. And you also have to consider the archeological context as well. Are there a lot of animals that might produce this in the area? Are you in Africa, Europe, or Asia? Or are you in somewhere where there might not have been as many large animals in that area? That would perhaps be a better option. So I'd say, yeah, think about the context. And if it checks those boxes, then yeah. And you can, there's plenty of people who are starting to do this when you can collect the samples and give someone an email who's published on this and say, would you be interested in analyzing this? And it is an expensive method, I might say. So per sample, it can be pretty pricey. It's not something that you can just say, oh, well, we'll just throw it over there. It does take some money, so it's something.  Yeah, it depends on how comfortable your chemistry. I'm not a chemist, I'll go ahead and just say that. So to me, what I'm doing in the lab feels sophisticated. To a real chemist, they're like, oh, that's undergrad chemistry. That's not a big deal. Yeah, if you know your way around a lab, you can perhaps do the extraction procedure. And I imagine that any sort of university campus will have some sort of way to have this solid to liquid lipid extract, which is what you're doing. That's what you're making. Now, once you get to that part, you need to run it on a gas chromatography mass spectrometer. That's something that, I don't do that part because that requires a fair amount of training and understanding of a very delicate and expensive piece of equipment. So I'd say that at that point, you almost certainly need to send it out to a lab, but you might be able to do the extraction point and then send them the sort of the final project before it goes in. As I'm saying this though, I think it is best to perhaps send it out to somebody who specializes in this, even though theoretically you could take care of it. Good. So along those same lines then in doing this work, do you look at actual poop? Is another question that came in. I guess. What's that? I've seen it before. Yeah, so I do not look at actual poop, and that's something that I get asked a lot. And there's a whole tradition of looking at copper lights in archeology that is much older than what we're talking about here. And there's a lot of great things that can come from looking at actual poop, looking at the stools in terms of looking at diets and looking at macro remains inside of it, as well as looking at parasites and looking at how people's health was like in the past. But what we're talking about here is all at the micro level. This is all stuff where it just looks like dirt. And that's what's kind of fun about it too is it's like in any sort of volume of dirt, there's all sorts of stuff and it is crazy dirty. That's another problem running this on the mass spec because there's just so much stuff and dirt and it has so many sources and it's totally its own little world in there and it blows my mind. Yeah. Well, it's so great to hear about this from you and it's fun to learn about something totally new. And I'd like to thank you so much for joining us today for this session of Ask an Archeologist. So thank you for coming AJ, it was fascinating. And thank you to the listeners, the people who joined us online. I'd like to invite you all to our next Ask an Archeologist which will be tomorrow, Tuesday at 11 a.m. And it's gonna be with Scott Byram who will be talking about how archeologists use ground penetrating radar to map buried artifacts and ruins before they begin an excavation. So another chat about archeology without actually looking at artifacts. So I hope you're able to join us tomorrow. And again, thanks so much AJ for joining us. It was fascinating. Thank you. Okay, bye. All right, goodbye. Bye, thanks AJ. I don't know, I guess she turned it off. Boop.


When you get to a stage in life where you think I haven't lived my life, I've lived all their life. This is what people have made life crisis for, they realize I haven't been who I wanted to be. I've been someone else's idea of myself, going back to my parents and the education system and my culture and my socioeconomic background and my nationality and my gender and all this stuff. I've just been that all my life and I want to have a different career and I want to have some different interests and I want to get a different hairstyle. I want to wear something different. I want to say something controversial.


The Department of Education, Innovation and Gender Relations under the Education Quality Improvement Project Equip broke ground recently for the construction of the school block which will comprise three stories with the third and second levels, each housing five classrooms with accompanying male and female washroom facilities. The ground floor will serve as an open brisway with male and female bathroom facilities. Parliamentary representative forecaster is North Honourable Stevenson King in whose constituency the school is located says he has advocated for the school's upgrade for many years and thinks the new wing to be constructed will add quality to the instruction received by students and boost their ability for higher education at secondary schools of their choice, some of which are located within the district. I believe we're under home stretch. On the home stretch to the finish line to ensure that those who are here now who are students and who are participating in this exercise can associate themselves with a vision for education in this country, a determination for better education, better school facilities and a fulfillment of an education institution that can continue to participate in one of the more if not the most successful education district on the island by having the cream of the crop in secondary education and the cream of the crop in primary education. The sword turning ceremony conducted by the government last week follows on the heels of another conducted just over a week ago for the construction of the La Gare Primary School. Minister for Education, Innovation, Generations and Sustainable Development Honourable Dr. Gail Rigabet says the ministry is actively pursuing the overall transformation of the nation's education sector in order to make those who benefit from it more globally competitive. While many important determinants of effective learning are beyond our systemic control, it is imperative that we collectively optimize the effects that we can control. One undervalued yet key determinant in fostering students' achievements in the physical learning environment or the quality of our school plans which impacts upon student morale and teacher commitment. The project also provides enhanced parking facilities for staff and visitors, upgraded water storage capacity and an improved sewage solution for the entire school. The contract for the unit's construction has been awarded to Construction and Industrial Equipment Limited CIE at a cost of 4.5 million EC dollars. Prime Minister and Minister for Finance Honourable Alan Chastney told students gathered at the ceremony to embrace their weaknesses in order to overcome them and excel in their education like many before them. You must embrace failure. You must embrace an idea and believe in it until somebody proves to you that it's not true. But now your power of knowledge becomes greater because you've learned firsthand. This is what this new smart school is all about. Government will break ground for the construction of a new unit at the Gordon and Walcott Memorial Methodist School on Thursday of this week. The contract for the unit's construction has been awarded to Prudies Construction Services Limited at a cost of 6.5 million EC dollars. From the Communications Unit of the Ministry of Education, Innovation, Gender Relations and Sustainable Development, I am Chris Satney reporting.


In today's video, what we want to go over are the properties of a gas, and in order to go over these properties that a gas has differing from that of a liquid or a solid, let's talk about what a solid, a liquid, a gas looks like at the molecular level first. Whenever we're talking about a solid, we're talking about particles that are very close together. So these solid particles are very close together because of the attractive forces that bind the particles. On the other hand, a liquid, a liquid the particles are, they have more space between them, however they are still somewhat close together. The fact that that space there is in between the particles is what allows a liquid to have a fluid motion. Now we come to a gas. A gas looks much different than that of a liquid or solid where the particles are much more spread out. So one of the main properties of a gas is the fact that the particles that make up that gas are very, have lots of distance between them. Now let's look at some other properties of a gas that differ from that of a liquid or a solid. First of all, they move randomly with high velocity. These gas particles that are out in the atmosphere at room temperature, they move somewhere around a thousand miles per hour. So they have very high velocities and they're moving at random directions. They are very, they have very small attractive forces between the particles. So the particles of a gas don't have very many attractive forces between multiple particles as a solid and a liquid do. Another property is that the volume that actually make up the gas particles is extremely small compared to the volume that that gas occupies. And once again this goes back, goes back to the point that there is so much space in between the particles. The volume that these particles actually make up is extremely tiny compared to the volume that that gas occupies. And also, gas particles are moving at a constant motion in straight paths. And that is until they collide with another gas particle or with the surface of the container that they're contained in. So let's look at, next of all, some properties that we use as scientists to describe gases. The first one is the pressure of a gas. The pressure is defined as the force exerted by gas particles against the wall of its container. So if we have a cylinder filled with gas particles with a pressure gauge, that pressure is simply a measurement of the amount that those gas particles are colliding with the surface of the container that they're in. That is really the definition of a pressure, the pressure of a gas, is how much force and how many collisions are actually occurring when these particles collide with the surface of the container that they're in. Now when we're talking about pressure, let's also go over some of the units that we use to measure pressure. One unit that you'll come across is an atmosphere. You'll also see MMHG, which is millimeters of mercury. Now what is the difference between an atmosphere and millimeters of mercury? One atmosphere is equal to 760 millimeters of mercury. In case you ever have to convert from one unit to another unit in terms of pressure, you will use this equality if converting between atmospheres and millimeters of mercury. Another unit for pressure that you may be familiar with, especially if you work in a hospital, is the torr. Turns out that one atmosphere is also equal to 760 torr. And then finally, the other unit for pressure that you may come into contact with is KPA or kilopascals. And when talking about kilopascals, one atmosphere is equal to 101 kilopascals. Now one of the other properties that we use to describe gases is volume. Volume is simply the space occupied by the gas, alright? So it's the total amount of space that that gas takes up. And what type of units do we use to measure volume? Sometimes you will see the volume of a gas measured in milliliters and other times you will see it measured in liters. The third property that we use to describe gases is temperature. And the temperature is the factor that determines the kinetic energy and rate of motion of gas particles. So the temperature of the gas is relative to the amount or the speed velocity of these gas particles. So as we raise the temperature of a gas, we are increasing the speed or the velocity of these gas particles. And if we increase the velocity of the gas particles, we would expect them to hit the surface of their container with more force and in turn pressure would increase. Now what are some units that we measure temperature of gases in? Well you will see them measured in degrees Celsius or Kelvin. However you must remember any time you are using the temperature of a gas in any type of calculation, it must be converted to Kelvin first. In order to convert a Celsius temperature value to Kelvin, you must add 273. And that will give you the temperature value in Cullen. And then finally the fourth property that we use to describe a gas is simply amount. And you will see this denoted by a lower case in. The quantity of gas present. Make sense? Finally, what are the units that we use to measure amount of gas? Some cases you will see the amount of gas measured in grams. Other cases it will be measured in moles. Now just like temperature, the temperature of a gas must be measured in Kelvin in order to use it in calculations. The amount of gas must be in moles. So if you are given grams and you are asked to calculate some value with the grams of a gas, you must first convert those grams to moles before you can use that variable in your calculation. So hopefully this helped with describing the properties that gases have. Just remember these four points here about a gas and how they differ from that of a solid or liquid.


I think football is more of an individual sport. So it's very difficult to become a leader once you get into NFL locker room. I think most of them don't understand or they cannot understand the concept of what it's like to serve and what are the things that you do. They don't realize that there are branches and different branches do different things and that concept was even new to me when I was in high school before I joined the military. Four years at West Point, you know, do very similar things, they explain the rules, the philosophy behind what it's like to be an Army officer and what it's like to be a leader. And then once you get into the Army you're supposed to go ahead and just execute that and instill those same values that you were taught at West Point. He's been a huge asset to the football team. It's been an honor and a thrill for me to coach him. I know I became a much better coach and a person because of my involvement with Al just in how he's pushed me as a coach and as a person to be my best. I think that success beyond a uniform is dictated by your expectations and what is it that you consider success. And I think that when you don't have the uniform you have to realize that things are not going to be as meaningful as they were when you're in the service because nothing is going to match the level of commitment, sacrifice, unity that you have in the military. And so you have to sort of redefine, you know, what is happiness, what is fulfillment and what is it that you're trying to get out of life.


In April 1948, researchers at the Atomic Energy Commission's Oak Ridge National Laboratory had a new idea for an atomic pile, as nuclear reactors were once called. They proposed a poor man's pile, a small research reactor, so simple and inexpensive that universities could buy one for scholars and students. I'm Tom Wellock, restoring at the Nuclear Regulatory Commission. It's been more than 60 years since the United States touted research reactors as a peaceful counterpoint to nuclear weapons. The AEC avidly promoted research reactors to jump-start a civilian industry at home and to cultivate allies abroad through Dwight Eisenhower's Atoms for Peace program. This is the first of a series of videos highlighting the promise and unique safety challenges of research reactors. In this video, we look at some of their achievements. As the nation's first civilian-owned reactors, they broke down military secrecy and demonstrated the Atoms' peaceful potential for education, medicine, research, and industry. In 1950, North Carolina State College proposed the world's first civilian-owned reactor as part of its new program in nuclear engineering and for use by faculty and local industry. On September 10, 1953, NC State's reactor started up for the first time. Open for public viewing, the NC State reactor was remarkable for having no secrets. As one newspaper put it, it was guarded by nothing more than a physics student with a guessbook. In 1955, Oak Ridge's poor man's pile became a reality when its inexpensive swimming pool reactor made a dazzling debut in Geneva, Switzerland, at the first international conference on the peaceful uses of nuclear energy. Over 60,000 people, including prime ministers, royalty, and presidents, lined up to peer down at the blue glow of the future. The peaceful atom had arrived. Dozens of universities and corporations built research reactors. They were small, safe, and used only a small amount of uranium fuel compared to nuclear power plants. For only a small investment, researchers could open up the secrets of the atom and produce isotopes critical to medicine and industrial uses. The unique value of research reactors were in their ability to produce an ample supply of neutrons. When neutrons pass through an object, they behave and affect its material differently than gamma or x-rays. Researchers have taken advantage of the neutron's unique qualities in fascinating ways. For example, early research revealed that neutrons could be used for radiography. Like x-rays, scientists could take a picture of what happened as neutrons pass through an object. Unlike x-rays, neutrons could make useful images of lighter elements that x-rays can't. By the 1960s, corporations began offering commercial neutron radiography services for imaging plastics, lead, gunpowder, and even the flow of automobile transmission fluid. Recently, the National Institute of Standards and Technology used its test reactor to advance hydrogen fuel cell research. While neutron radiography recorded what happened to neutrons as they passed through an object, a completely different field neutron activation analysis studied what happened when neutrons struck other atoms and made them radioactive. By making material radioactive, scientists could determine the elements that made up a mixture. Neutron activation analysis is used in pharmaceuticals, geology, and to determine impurities in semiconductors. Physicist Robert Oppenheimer suggested a particularly unusual application. He thought it could determine the origins of ancient pottery. His suggestion has allowed archaeologists to determine the origin of artifacts from ancient civilizations and understand their wealth, trade, conquests, and social practices. Research reactors are probably best known for producing radioactive isotopes for research and medical applications. The process usually consists of inserting material to be irradiated near reactor fuel to be bombarded by neutrons. This process has produced essential isotopes, such as molybdenum 99, which decays into the most widely used radioisotope in nuclear medicine. About 50,000 times a day, U.S. medical facilities use it in imaging and diagnostic tests for heart, brain, kidneys, and tumors. Other isotopes are used in industry for irradiation purposes, such as eliminating foreign matter and food. And it also plays a role in DNA sequencing, pain treatment, fossil fuel extraction, and weld radiography. The poor man's pile, so avidly embraced in the Atoms for Peace program, succeeded in many ways. Worldwide, over 670 research reactors were built in 55 countries, with 227 in the United States alone. With the promise of research reactors, however, came key challenges in ensuring their safety, preventing diversion of their fuel for weapons, and preserving their benefits as their numbers have declined in recent decades. I'll turn to those issues in our next video.