Okay, hi everyone. So we'll be starting the responsive web design workshop. I'm Arpan. I work with a part of a design collective called uncommon So today's workshop. We are going to be mostly focusing on different ways of writing different responsive patterns So we have a limited amount of time. So let's see how much how many different things we can cover today The focus is going to be mostly on the on the HTML and on the CSS The HTML I've already prepared for you at this link. If you download that, you'll have the file with all the files there So this way that we are not going to waste time sitting and writing or writing about mistakes and all that We'll only focus, like we'll take a look at the markup of how it is written and why it is written in that way And then we'll look at what would be the best way to what ways we can create a good layout That would work well in a mobile, in a tablet and on a PC So one of the things that I see is, well actually, before we start that Now how many of you are familiar, very comfortable with HTML and CSS? How many of you are not? Okay, so let's do this There is something, let's test them out Which one? Let's start with HTML No, let's do it with HTML Let's start with HTML Okay Yes Right, so you need to open the individual HTML file itself Don't worry about the links, the links are not all linked up Alright, so here's the thing We have one file getting started at our HTML So please open that Yes, yes, I understand that So the styles are not written for you Okay, this is the first exercise The HTML has been prepared for you Your job is to write the CSS Okay, this is the layout that you have to build You all said that you know front-end design, you know how to write CSS So build this So your first exercise is to start with this Write the CSS Now if you take a look at the HTML file You have this CSS file already linked So just open this, it's a blank file Don't worry about so much about the colors and the styling but the layout Now here's what I'm actually looking for Now this is an initial Like if you just look at it on the desktop, this is a layout But this is actually a responsive layout So you have these three So initially at least at the minimum Even if you're not used to responsive layouts At least just build the desktop layout Yes, so this is a layout You have 10 minutes to build this layout Okay, just pass it on to copy and copy It's just a small file, just copy and pass it on You need the files? So if anybody else hasn't gotten the file, that is the link tinyurl.com slash oq5tgk Alright, so download the file if you can't I'll share the, just use the pen drive Okay, who doesn't have the HTML file open? Are you done copying? Did it get the files? So that's the link you need to download Otherwise I have the file right here So if you look at the HTML here It's actually very, very plain You have a container, h1h2 We have a list of links And you have three paragraphs So we are just formatting that into this layout It doesn't have to be exact, doesn't have to be identical This is just for, get as close to it as possible If anybody needs the file, let me know So everybody has the files now Make sure that you have this HTML file open Getting started.html And then open the CSS file and start writing So we have this file open, getting started.html So open that in the browser Take a look at what we have So none of the slides are there So now I want this layout built I want you to build this layout So there is a file getting started out of CSS Just do that So the colors, it doesn't need to be identical So we are just getting started So I want you to start with this And then we will go to the next one Don't try to worry about pixel perfection Or about exact volume Just do an approximate version of this In the meantime, so quick question How many of you have written responsive layouts before?  Okay, that's a very good number All right Without Bootstrap, without foundation Like you can use SAS, Susie, whatever But not a readymade framework that does it for you Okay, so how many of you have not done responsive layouts At all or don't know how media queries work You have a basic idea But you have not actually used media queries Before manually Okay, sorry Okay, how many of you have finished the layout? Any of you? Using only plain CSS Please don't bring in Bootstrap Or anything else In your folder We are going to learn How to write responsive layouts In different design patterns Like this is a very basic layout But we are going to be doing more complex layouts Which we cannot really use in Bootstrap So, like Let's not use a tool that will restrict our Design Yeah Those of you who are comfortable with responsive layouts And know how to use media queries Add this And this Don't worry about the colors Don't worry about the backgrounds Just a rough version of the layout Yes That's good Yeah, so now When you make it smaller I want this to Yeah Yes, I want it to change to 2 That goes from 6 to 3 This goes from 3 to 2 And then this Yes Yes, sir I don't want to do that Yeah, so that's the reason for this I'll show you how to do it Yes Yeah, so here It has 6 beside each other When you make it smaller Move it to this So how many of you are able to get this done? Yeah, good Okay, so Instead of taking too much more time Let me just show you quickly how we could do this Alright Let's not worry about that one in H2 They are not really changing Let's just focus on The chapters Let's take an approximate What's the Let's go with block Okay, so this is What it initially looks like With the little CSS that I wrote Let's change And Martian Okay, this is Approximately rough idea of what We wanted to bring Just simply Yeah But we have some text floating So we want to clear the floor So Just go here So what we have done is We have removed the margins of the padding So it stretches all the way Now remember we are doing very roughly We are not trying to go with Exact numbers and all that Because you can do that later Just to see the pattern We have the list element which we are taking it Floating it to the left Giving it a bit of about 15% And so we are getting We are able to fit in 6 of them What we want to do now is We want to change it at Slightly smaller screen size So let's Set it Okay, so If you don't give work for hidden Then this element Unordered list UL When you have elements inside it That are floated The UL itself doesn't have a height Like it doesn't have a height at all So by Setting it to work for hidden The unordered list comes all the way here And pushes the content Other content below it It's just It's just basically Clearing quotes It's a clear fix That's how clear fix works It's the simplest way to do it You don't have to do all that before After and on the This is the simplest way to do it It depends on how But like I mean This is the simplest way to do it This will work in our process Work for hidden Yeah You might have an item that is Out of the box And work for hidden And if you have Yeah So the other way Gives you more flexibility But for the sake of this thing This is the simplest way to do it Okay Okay Yes What is the advantage of using float Leftover to display inline block So this is like It doesn't really matter You could use for display inline block And do the same thing Except that float allows you To give precise margins Display inline block Will display Use it as an inline element Which will always have a space after it So you won't be able to control The exact space in margin Five things I mean If you have more elements 25% each You will There's a tendency Of the float side to come down Because it's 25 plus the space Yeah Okay So here Okay So we have this part done Now what we need to do Is we want to change it at a certain bit So then we add a media query This is what it looks like Basic question What is a media query? Yeah I'll just show you I'll explain one second Okay Now in CSS When you're adding a CSS file To your HTML file You have a thing called a link Style Style sheet About that There you can even say Media screen Then you have another type of Media which is called Media print So that You can say that Instead of having colors Instead of having a background Of black I just want the background To be white And I want the text to be black Like you can customize it For print You can customize it For Like you also have Media You can have CSS Which is just for a screen Reader For example We have Different media Now Media queries Now But Apply this CSS Only when the maximum width Is 640 pixels That means If the screen is 640 pixels Or less It will make this yellow So If I Make this Narrow We will Yeah Sorry See this If you take a look It's white Make it narrower It's yellow So basically this CSS Anything written inside This media query Only will apply if this Width Meets this condition So you have Options of maximum width Or you have the reverse Which is minimum width So Starts from this And then when it crosses A certain width 700 pixels and greater Then do this So you can do that That's basically what media queries do If you go online I will give you links At the ending There are Lot of media queries Not all of them are supported But you have options Of max width Min width You can select Specifically You can do a layout Which is for portrait Versus landscape But It is most commonly used Max and width So you are basically Adjusting the layout Based on the width Of the screen The next one I'm saying You could see that Regardless of the length Regardless of the max width I want a tablet Or a phone in portrait To have one view And a tablet Or a phone in landscape Could have a different That's not A common use case But you can do it That's an option That is there for you Depending on your Design Okay So Anyone have a doubt About how Media queries work In this part Okay So here's the thing What we are going to do Here is this We set a certain width For this element For the nav li We are going to Change the width Over here We said that The list element Is 15% 15% wide So at 640 and below We are saying Now we interest this So with just this We set at this Screen size Change the max width So now Each list element Is 30% Of the screen Can you now do Now since you have seen this See how we can do the next one So I add Another media query Below this But make it 400 pixels Or 480 pixels And then have them in just 2 beside each other Instead of 3 Inside Okay So one thing Everyone needs to remember Is that We are talking about Style shapes CSS We have cascading Style shapes So one thing Overrides So this overrides The previous one Is specific For example Here you have Nav Li And here also We have Nav Li So both have the same Specificity With the media query Change it But If you don't do that Or if you If you do this Like you have Nav Li here Which is less specific But that is more specific That will Still overwrite this This won't work Because that is More specific Same if you have a class So remember When you are writing CSS Elements The styles Make sure that Your specificity You don't make it too specific Or if you do You will have to Use that at every stage So if you have like Navigation Nav UL Or header Then nav Then UL Then li Then you will have to Use the same thing In every place That you want to Overwrite it Or you have to Add additional classes To that Okay So try to keep it As less specific As possible Okay Okay So far this is Like the most basic Layout possible Sorry So this is just To introduce how to use Media Quills Are we done with this part? Any doubts? Okay So let's Take a look at the next Layout Which is actually the Layout that I want to talk Now this layout Is very simple Like it looks exactly Like what bootstrap Do you have columns And then merge And different things We are adding like Just two layouts You have like Three layouts So they adjust In between Things like that Now But this is a This is actually A very bad Design pattern Okay Now why is this A bad Design pattern I'll explain this Let's take a look At the next one But here we have Some paragraphs Over here An article And we have A block code So this is One column So you have One column In a normal layer If you merge that This one Would go below The article Correct Now if you are Reading on a mobile Or on a smaller screen Does it make sense For the full code To be here Or to be at the Very bottom It should be Beside Or it should be At the minimum If you have Less space It should come in here Or here Wherever Whichever Paragraph is a part of It should not go to The very bottom Right But that is One column Two column Three column You reduce it And then you reduce it And that's it But that's not That's not Optimal You have to think about What your content is doing Like The previous talk Was also about that Right Your content is important That is what's most important Your layout has to Facilite Make sure that Whichever screen Your user is using The content is Presented in the best Way possible Okay And that's one thing Second Now you have A phone Do you want to Read about the First or do you want to Read the article first The article is most important Now if you are Reading on the desktop You can just ignore that Correct You can ignore it And you can read the Article if you want to But on a mobile Like if you have to Scroll through Like two, three screens Before you can actually See the article That's going to be Irritating So what Ideal would be That this Goes to the bottom And this Merges in here And that's the Layout that we are Looking at What happens here Make it Scanner The author Info disappeared Going to the bottom Is right here Alright First Second We still have The Block code over here I want it to merge In Like this Okay So Thank you Thank you Alright So this Is the First exercise That we are Going to work on Alright So I am going to show you A very Now this Looks very Implicit Thank you for your Claps But the fact is That this is Extremely simple to do Alright And we don't Most of us Don't do it this way Because we use things Like bootstrap Or foundation And things that Handle it Automatically for us So we don't Think about the Design But we are Supposed to be Designers Like our Framework tells us To do it Right That's what We are here for If If you Just use Bootstrap And let everyone That make All the decisions For you Or for me Then why are We here Right Our job Is to make things Not just Look good But to work Well So this is The very First exercise Next Exercise is Going to be A slideshow Which is almost all CSS With just a little bit of JavaScript So in So we I think He'll be happy to see that But right So two elements Animated separately With about 6 to 10 lines of JavaScript Everything else Is done in CSS Now creating A slideshow That is responsive Has some complications Which Will cover When we come to that And Here's the final Navigation Over here Like this That when you Change it Facebook style Side menu Alright So this Is basically What we're going to Try to cover today In three hours If we can do it Please So we That's the reason That I've given you All the HTML The JavaScript Everything is given to you So that you can You don't have to Spend time doing that All our time Is going to be Focused on Just Writing the layouts Even the styles The colors You will see that All the colors Everything is set If you open The second file Article 2.article HTML Open that file You will see that All the styles The colors The fonts All of that Is done for you So you don't Have to spend time Trying to make it Look good So I don't Want you to waste Your time doing that Today we are Only going to Focus On Creating A good Layout Right Is about Look at the content Look at How What kind of a layout Makes sense And different screen sizes Okay And design it accordingly So you are not Just thinking about it In terms of columns But in terms of How the different Pieces of content Are connected to each other And in this case When we are doing this One of the things That you've probably Heard a lot about Is mobile first Starting with the mobile First And to do something Like this You need to start With the mobile first You It's not just with the mobile You start first With the HTML itself So make sure Where the structure is right Is the structure For this is right Then to change it From the small screen To the bigger screen Is actually Very, very simple Alright So we are going to See how to do that Let's just open it Open the file Or by the way This menu Sliding and slide out Is Without any JavaScript As it Literally no JavaScript Is there Not a single line Of JavaScript For this What you have just When you click on it There is no on-click handler Is just CSS with Target Which I will explain How that works Anyway Alright So this Is the This is what we are trying to do Let's take a look at the Let's open the file Open this file This is what you will see Okay So all the styles are set For you You have the initial links So we are starting With mobile first So this is the mobile Initial all the styles Are for the mobile layout Scroll down So you already have this part Done Right The merging part You don't have to worry about Merging part We are just going to figure out How to move it to the site Alright So this is the initial layout This is the mobile layout With essentially no styles Set up there We have this text We have the Slideshow Without any Slides Happening So when you say the merging part Is already figured out The As in It is already inside It is merged You are starting With mobile first So look at that So for this Let's look at the Code Let's look at the markup Now the navigation is pretty simple You have Next type lists Right Let's look at That's how you normally write A multi-level navigation Next This is where the important All the fun happens Basically You have the article Inside the article You have the header Okay Which is the title Then you have the section Which is the story over here In the story You have Paragraph Second Third paragraph And then the block code right there Like if you remove the CSS That's used to get that same layout Okay You can even take the Like if you want You could Just say okay Remove the CSS files Completely And refresh it And you have the Block code right there Without any styling Correct So the markup Has to be written properly For this to work So in the sensible manner So if a person Assuming Let's say if Someone who is differently able The person who is Who is applying Is Reading through your article Using a screen reader They are also going to Get the exact same order Which makes sense right They should also Like even for a person Who is using a screen reader They still want the Block code in the place Where the block code is Supposed to be It would make absolutely No sense for this To be read at the Very important Correct So that's What we are doing here So we have the markup Any doubts about Any part of this So let's start with the css So we start with Ok we have the page Let's just give some margins Or some padding to it Or actually there is Ok how many of you know What is box sizing Border box Anyone Few of you Many of you don't know Ok So normally in css When we are looking At the previous layout Let me just take Open that If you see here We set the width to 15% and gave a margin of 1 Or if you do anything With the padding as well If you add If you have this Width set to 15% And you add padding of 2% What will happen The width will change to 17% It will be 15% Plus 2 So it is adding to Whatever the width is Correct So if you add 1% On both sides Totally 2% Or whichever So whatever you are doing You are adding padding Margin, border Everything adds to What is already there Right It doesn't stay within like If you wanted Let's say 4 columns here And you set 4 columns To 25% each And then you set padding of 1% Instead of being 25% It will increase in size Again if you Even if you add Like you want a 1 pixel border That 1 pixel border Will break your layout Correct Like you have 25% width And then you have A 1 pixel border It will change your width So that 4 columns Don't fit in your place As they are supposed to Correct So border So border box is something That is a little newer Which basically says that Whatever the width is Set Paddings, borders Everything has to be Within that Okay So that means if I Set something to 25% And then have a 10 pixel border It will not break my layout It will stay within The 25% Okay So that's what We are going to do For this We are going to say That we want to use Yes open the Article or CSS Essentially we are saying I want everywhere Every element To use this Okay So every element That we are doing Instead of having to Set at its place Just star Every HTML element Box sizing Bottom box Next Let's go to page Okay Let's say Adding of What you want to do Percentage 1% or 2% We want Like If you have a very big screen Like we don't want it To go like So wide So let's set a max width Of What you want to Set it to Now we don't want it To be 100% We want it to be That right So Max width of Let's say 960 pixels And margin Now It will stay centered And it won't cross 960 pixels What do you say The margin 0 auto So if you want to Center an element Unless it's As long as it's Not floated Block element You want to Center it Let the Right margin So Next Okay So Now next part What we want to do We don't want We want to focus On the article right now Okay We have the image We have the slide show We have the navigation We are going to look at that later But we are not going to Look at that right now We don't want all of those In the way Like we are doing this So let's just hide them For now Temporarily So And This is Figure This is like All right So we are just Hiding the elements That we are not working on now So normally You don't want to use Discipline But for the sake of Just temporarily We just don't want those In the way We are just going to Look at the article So this is what We have Let's also hide the Links So this is what we have Okay Now First part We are going to see How Like on the mobile screen This is what is there Right On As you move slightly larger To a larger screen We want this To move to the right Got it Any doubts Okay so let's do that Okay That Once you cross 600 pixels Let's So here's One thing About media queries Don't necessarily Fix on Cert On specific screen size Don't say that This is for mobile This is for tablet And this is for desktop Because Think about it You have Small phones That are 3 and 3.5 Inscreens You have Large phones That are 5.5 Inscreens Now you don't Stop in screen If you look in terms Of the total area It's more than twice as big Right So there is no There's no real reason For you to give this Same Layout of the cell phone Every smartphone You can customize it My recommendation Would be Not to customize Based on the device But customize it Based on your content And the screen size So if Now this article If it looks Fine Like you have You have websites Where the articles Final full width Or is a single column Even on desktop You don't need to worry About like Okay it is on a desktop So I need to have There is no such route Look at your content Look at Your requirements And how it looks And adjust your Layout accordingly Alright So in this case We are taking 600 pixels Like if you Don't like 600 pixels If you think it needs to be 640 Or 480 Do that Alright So at this size Now we are going to Make some adjustments To the layout So let's say That We are going to do Story And P Do this Open your page Refresh it Look at your layout How it looks A little messed up That's fine Because we haven't yet Worked on that We wanted this To be 75% Right We got that Now all we want Is now This is kind of All the mood Because of the Point But we want To move it properly So this is What we will go Okay instead of 75 Let's change it Right Now refresh your page And see what happens You got it Did you do this Paragraph 70% in float left Block port 25% in float right Not able to see Let me Move it up Move it Are you Are you able to see This green Or do you want The lights The light is not Just like The angle is too sharp Okay So here We have Media query Story P With 70% in float left And for the Block port 25% With And float right Now if you Look at What happens Now refresh your page This is what We wanted Was it difficult Just simple Float left Float right Set the width Can you Adjust this placement Got it Okay So now So this Yeah Okay So right now This is related to this right So you can either set a margin for this Or if you want it to be below this Just a clear both Let's say if you want this Instead of being Beside this You want it to be after this Right Just a clear both Find out Find out If you want it to move to the very top Then you have to Change it a little bit In the way You do it But you can do it Yes Float left Yes Okay All of you How many of you Have gotten this Okay All right Okay So you understand How float Floats work Floats basically Let's Essentially Every element goes to the top left Assuming you are floating to the left So it goes to the very top The next element If there is a Based on the width If there is space If the next element is floated It will come to beside it Let me show Let me demonstrate It's better if I do it this way You have this paragraph Clear Then you have the second paragraph Beside Now when I say Clear Instead of being Beside it It will always go below it Even if there is Floating Floating Floating Even if there is space beside it Clear will move it below That's it So When I have this Edit is right now It is below this right So these two elements are active Beside each other Like it's at the right end If I don't have the clear It is beside it If you say clear Then it goes below it That's it Now about moving the other stuff We are going to look at other questions later About other different layouts But for now let's just focus on this layout Finish this layout because I don't know if I will have time to cover everything In the three hours Based on that we can have a discussion after this Alright Okay so this part Anyone have any doubts about this So far Yes it's fine Alright let's go to the next one Yeah Okay what's happening Ahh I just want to I want to So You said This part is near About that Am I telling you this Why is this so near Is So this space here So that space is near So this is the right layer Okay so everyone one thing to remember remember these lines make sure that you have this okay otherwise these elements will interfere during while we are doing this layout when we come to that element those elements will work on them for now I will make sure that we done okay first second make sure that you are keeping the same as much as possible keep the same numbers you can experiment with them later because if you do something different and then you say it is not working I cannot fix it okay. Now the third part was in this we wanted once you go so from 600 pixels across 800 pixels you want this to come to the side can you try to figure out use the same method same technique that we use for that use the same technique and see if you can do this try to move the story to the right and get the get the footer up here yeah that is it right it is not it is very simple if everybody has a question in the first part let me know in the meantime those of you have finished this please try to do the second part we can look at it after so basically okay what's up it should automatically move to this side with the margin so we look at it with remove the styling and do that okay next anyone else has a doubt so far in the first part not a footer get this to come here so right now yeah this is what we have done and the footer is all the way bottom I want this to come to the left who got it that's very good not understand how to do it use the same technique that we used before just the floats and the bits got it so make sure that you're adding another video please don't do this in the same media query because we also want this we want this layout for the tablet right then when you go to desktop then you want or you go to the largest then you want the footer to come so don't do the next part in the same media query so first thing is we have this media this very old year so 600 pixels add another one which is for let's say 900 pixels okay so we have one for 600 add one more for 900 and then do your code over here remember there are two elements that we are working on right ignore the paragraphs the block codes all of that is done now we are focusing on the story and the footer just those two elements so make sure that you are looking at that and not looking at the trying to float the story or the paragraph don't float the paragraphs now again work on the story and the footer so should I show you okay those of you did not get it should I show you how to do it now okay three more minutes okay your time is up now let's look at what we need to do this is this entire thing is a story okay so we float this to the right and give it a bit of seventy percent or whatever you want to and you have the footer you sort it to the left and give it a bit that's all let's go to the board yeah no okay so you got this we have the footer came up but the image is too big so what is solution for that just go here to the top and say image max with 100% so it will never go outside its container so if you are writing the exact same cases that there is a mistake there will be some bug in your thing like one small element see double check if you have if it's not working there is always going to be some tiny one dot somewhere one semicolon somewhere or a bracket that you're using the wrong bracket most of the mistakes are just that you just use a small so it is different like you do have like ones that do the stuff for you some of the actually like essentially in these kind of cases in my work I am mostly using sass in sass if you made this mistake it would blow up and say there is a like it's there's a problem in some sense I will show you how that works in sass you can nest like you can nest it inside another element so if you have story you would have this inside it here but instead of nesting an element inside the media query and it will render the correct I will show that as if we have time I will show you when you will link so you can take a look at any notes so far so this is what we have completed so let's just do a quick review so we have the article it has the block codes we have the past story with the block codes and we have the footer we started with a moment we started with this with the block code in here and the footer at the very bottom as the screen size increase increases we are moving the block code to the sidebar for this all we are doing is we are just using simple floats float left float right and well then next doing the same thing for the footer float left 20% 25% float right 70% and then match it for the image 100% so that it doesn't go outside its borders that's it so exercise one is complete now we are going to look at the next part any doubt so far yes set it to max with 100% here look at this image max with 100% so when you say maximum width of 100 can be less than that when it won't go beyond that okay okay so how many of you have used this max width like this how many of you understand this so what we are saying is that you are not saying that it should always be 962 pixels it should be 962 pixels or less so that means if it is on a mobile screen and it is only the screen is only 300 pixels or 400 pixels wide it will be 400 pixels wide but if it is greater than that if it's whether width is if the screen is like you are on a very large screen you don't want your paragraphs to be difficult to read they say it should never go beyond this okay so depending on your layout you might have 962 as a maximum you might have 1200 as a maximum it depends upon you like many of some apps that I work on we have like 1200 pixels wide or whatever it's your option but this section was everything and this center so this is this part is done now we are going to look at the image now this is again this should be very simple for you to do this part we have okay so the estimate the estimate tag is a figure there is a HTML5 tag figure this has an image inside it and it has a figure caption so basically it says that image as the captioner together is at a single element and I would this layout on a larger screen but on the smallest screen the layout is already done so can you do this so use the same method that we use for the paragraph and the block board on the small screen it is like this but below the other which is already if you look at it it's already there what you need to do is right now we have hidden figure right at the top here so remove this just go here say figure display and refresh your page page you will see a bug so make sure that you have this this is what it should be figure display block and clear both right now we are only looking at the figure so already everything is hidden right so only the figure we are displaying for now and looking at that okay so did you get that we have this we want to forget about the slideshow right now only this we already have this it just needs to change to this that's all the caption has to go to the right that's it. Okay so you have five minutes. Okay all right so I'll tell you what's happening now many of you have done a part of it right now we are taking a look at this here you have a figure in the figure you have the image right they're saying float no let's set the bit 70% float you're getting this or if you're even floating the second element you're getting this problem all of you got this now we had the exact same problem in the very first time when we were doing the links where the element was so you just need to add clear fix to this because two elements are floated the container element now doesn't have a height at all so if you insert the element with the figure the figure has a height of 0 pixels because both of it containing elements are hidden and both of them are floated so all you need to do is go here or to hidden to the figure element and you're done so this is what we have gotten okay so complete this sure that you have it all the way in the bottom and then I'll then we'll now we have gotten all the elements positioned in the right places next we look at actually creating the animation and having the slideshow so so okay so we don't have a lot of templates you got everyone gotten this far we have the we have set the width and the height and the position and all that is done we have it be the responsive part is done well the next part is to create the actual animation right so let's do that okay just look at this part can you see this can you see this here can you see class being changed current previous and that okay so that is what JavaScript is doing that's all okay it's telling us it's letting us giving us information that this is supposed to be current slide this is the previous this is the next and that allow we will use those classes current previous and no only current and previous right so we're going to use these two classes to do to create our slideshow all right so first now in a slideshow every element that is all the elements should not be displayed here right only the current element should be here so by default we don't want this box here so we are going to change the positioning here go here and instead of left zero we want the element to come from the right side right so instead of left zero let's set it to 101 percent what does that do now when you do it here we can actually say since I removed what we did you can see this can you see where it is now it's just like this is the container and it's just right outside it now what we will do next is we'll just say that take these two items okay so what we are saying by default put this outside like at 101 percent and the current slide make it zero so bring it to its to the position that you want it to be so refresh it here now see what happens the slides are changing that slide comes here correct now if you want to actually create the animation what you do here is this you go here and say what's it transition duration that's all you need to do to create the actual animation so you set it set it to 101 percent then set it to zero percent and every time the class changes the position changes but instead of happening just jumping it moves can you see that now okay so we got the first part so we are having this element coming here but then we want the current element not to go there but to go here right so then we add another class we already have the class in this we saw right previous there's a class called previous so let's just do that take this here refresh and see what happens what happened so I mean this is the first part so you still have a little bit with z index like you need to make sure that when it's going back there you don't want to be to be visible things like that we'll take a look at that but like this is what the core part of your animation is working here so we'll do that okay but now before we go to the z index part we still need one more thing now we want these two elements they are being animated together we want to animate like we want the text to come slower how do you do that just change the duration so go here to the port here you have constant duration one second right so copy that into the span and change it to 1.5 that's it so see css is actually now with all the new features that you have in css 2 css 3 there are so many features that we have that are that work right now in current browsers so you don't need to depend on javascript to create all the animations for impact this is just a very basic animation you can do much more complex stuff than this but the idea is that whatever you can do with css do it with css so see the javascript now it's very if you look at the code it's so easy if you actually go and I want to modify it or want to change how it works or if there is a bug you can actually very easily see what's happening and fix it because all your layout stuff is happening here so if you want to hide this stuff that is beside make sure you go here now the animation happens any doubt so far we haven't yet done it we need to do that yeah so we have a class in the center that we did for that what we can basically do is we let us see yeah just one second just double checking it's working we're still not going to do it so next step but this has the previous one is very nice to work in here no it's actually not previous the standard that it should be what standard that's what it is right the index one is an index 10 but that's not working so I have it working okay but I've done it differently yeah what I've done is for your current previous yeah the current I'm setting it to zero for the previous I'm setting it to minus one so when the ring slides exactly it goes behind the image and it's not visible but your current previous is always at zero are you setting it to the image or the alignment the image at this point yeah so that's what I was thinking the mistake so you still have a problem with the tension yeah so I haven't set it to 10 and one I've set it to zero and minus one okay okay so this is the final code so this is all basically the entire cs the entire layout or the entire slideshow open the nav.css we are going to do it here now here's one thing that till now we have been doing one layout for like we are building from the mobile layout and then slowly building up to the larger layout now in this case what we're going to do is we're going to have two completely different layouts one for mobile one for layout desktop because like there's very little similarity between the two so we so if you first do the mobile and then try to override you'll have to override so many different things so for the sake of this we'll just have everything in a media page all right you can always do the regular method and then override it but it'll mean a lot more cs's free so let's start with this layout is already done for you so you have the navigation which you have this already there right now we're going to start with let's do the mobile layout first so add a media page we'll give this mobile layout for upper tablets for the menu and you can change it you can do it differently this is a bit so 800 pixels and below we want to give it the sliding menu and above that we want to give it a regular menu so let's start both these so nav is going to be the navigation element here and you have the page so okay so let's see what's okay so initially we're only looking at the navigation okay so you have this at the you have it behind the content so when we actually add a background so it'll become it'll you won't be able to see later but the idea is okay so you're seeing position fixed so even when you scroll even when you scroll this this should not be affected it should still stay the same place wherever you are first second you want it to be from the top to the bottom you want it to stick right so you're just saying from top to bottom and stick to the left so this and you're giving it a bit of 200 pixels so it will always be within this area no matter what the size of its uh the screen itself is when you go bigger than that it's a that doesn't affect only 800 pixels and below now for the page what you can do is okay what is this we have added a link or we have added two links over here okay so we are using this we are doing this without any JavaScript we're just saying that we have two pair links in the same class one is show one is hide and the hnf is different so it just uses an anchor tag okay now look at this ID what is this ID so this when this matches this you can target it okay so when you pick on this the browser knows that this element has to be treated differently so it's a another new pseudo class in CSS 3 so make sure that this is correct all right now let's take a look at this uh i'll explain this is the ID menu right here you have an anchor tag with the same ID so when you click on this you can target this in CSS without the awesome it's not used like it's not supported well supported in all the functions you can use no so see normally when you know this old method is when you just scroll to it but i'm talking about applying css it does go to the hash of the page but the hash of the page is this i'll show you we'll see okay uh you know you know pseudo classes like hover and focus right so this is a new this is another pseudo class called target so what we'll do here is this target okay so when the menu is targeted the menu still stays in the same place is the page that moves so how do you tell the page to move whether then that is it so what you say is menu target plus page uh so essentially we're telling it that the page element that is after this has to be moved okay so here you have position absolute and uh let's say you set a position here is left zero here you say position left 20 200 pixels okay now go here did you see what happened the url over here changed when that url changes over there we can use this target to target that okay so you could just even do something like so when you're saying menu target right so whenever that url changes to when the hash is clicked you get the hash in the url then you are able to use that to target css so essentially you can have certain level of behavior essentially just with css over here so you click on something you hide and show stuff so how have you had in a how we have over and focus you have target so you can say okay so now one more thing is we have two links over there so when one link when it is hidden you want one link to be displayed one link to be so we just do that okay and okay so this is what we have right we have a link we have two links there one link has the uh hash exact hash which matches this hash menu right so when you click on that we are able to asset target some css for this and use that also to target some css for this and then you click on that we're just saying that okay hide the this link and toggle to the other so look at what we're doing here in css so by default you have two links for menu one is show one is hide so the show link is displayed and the hide link is hidden so when you click on that it shows the menu when you show the menu we are reversing it and saying that show this link hide the other link so there are two links in your in your marker here right you have two links here one and two so this one is used to hide show this is used to hide so with pure css just with a couple extra elements and using the target method we are able to hide and show basically do the menu now the next part is do the animation add it you know how to do it right just add a css transition yes okay so how many of you know what this is plus okay so basically plus is that if you have this element here plus says that okay this is the next element after it so if you have a page element that is immediately after menu it will work so you can do it in such a way for example let's say you have you have a paragraph and you have some spacing above a paragraph but just below a header you don't want spacing so you can say h paragraph top margin margin top 20 pixels or 2ms and h2 plus paragraph margin top 0 so that any paragraph that is immediately after a margin won't have top part so you can have a header and then a paragraph right out so you have spacing between paragraphs but not between a header and a paragraph so or you can yeah yeah yes uh so you have this why do you don't have this uh why is this required yeah because we have fixed it position fixed not position absolute position fixed is always in relation to the viewport okay so if the code is same but it's not working that means there is a you have not typed it again okay so look at the HTML here uh the navigation here and then you have the page right after it so what we're saying is plus says that any page element it is immediately after this so if you had uh you could say the same thing for header plus section would target only this section but not any other sections so the first one it is immediately the right after it so yeah no the plus is separate what we are thinking on it the target is changing so we are saying when you click on this then you are getting the hash menu right it's look at the url yeah it matches this in the url because the url so go to the top look at that hash menu so this id is menu the url also has hash menu over there so that it is showing that you have clicked on this tab this anchor so that this anchor this element is a target so you are saying that menu is the target so whenever menu is the target then the page has to be moved by default it should not be moved only when the menu is the target then you want to move the page you don't want to move the menu yeah okay any doubts so far okay so about stuff like this i'll discuss this at the very end there are many many different css selectors that you can place in addition to this so yeah some are not everything that we are coming to be supported you might have to use the hash menu yes overlapped If you add the transition to the one in the class in the target, add it to the main page itself. Okay, alright, has everyone gotten up to here, anybody who hasn't gotten this, I will talk about the transition next, I will show you where you might have a problem, but up to here, how many of, any questions up to this stage, anyone, no, alright, okay, so let's take a look at the transition, now when you are adding the transition, don't add it to this element here, you need to add it to this element here, okay, so let's do that, we want to add it to both the page and the menu link, right, so okay, so now do that, why is it bothy, right, yes, no the nav is not supposed to animate, only the page and the menu link are supposed to animate, but why is it bothy, now when you are adding the transition, always remember that the position has to be set properly, okay, so now see this, the body is, the transition is happening there, right, but there is still one more problem, the body is supposed to move, it is not supposed to resize, it is resizing, right, why is it resizing, because we haven't set it a set of it, we are just saying my move left 200 pixels, we are not set that it should go beyond, so set the width of the page, okay, now see this, is it working properly, but the link is not, the body is animating, but the link is not, who can tell me why this happened, but we have applied it to the menu, right, here is the reason, we are not moving the link, we are removing one link and showing another, right, it is not the same link, got it, so what we need to do is instead of showing and hiding it, we change the zindex so that one comes above the other, so then both of them will move, one will go behind the other and you won't notice that, both links look identical, right, so instead of using display null, use zindex, so say that here instead of display null, zindex is minus 1 and here zindex is 1, let's see if that works, now it's working, because till now the problem was that one menu was being hidden, the next one was being displayed, there was no transition in between because the position wasn't changing, 2 different elements were in use, now we are having both the elements displayed at all times, we are just moving one behind the other, so both of them are moving together, you don't know when one comes out of the other, it doesn't matter, that's it, so just take a look at this and I think we have finished with our main all the exercises that we had decided, so we still have some time to cover a few more extra things, so let's just finish this, any doubts if we have let me know and maybe I will see if I can cover a few extra things.


One of my biggest concerns at that point was managing my expectations and student expectations as well. We worked really hard in both my classes to create community and my classes were built around small group discussions, collective problem solving, and we had a number of really great guest speakers come into the classroom. And I think I was most concerned about how we were going to carry all of that life over into a digital space. But thankfully I had a really wonderful TA who was willing to talk through the process with me when we sat down for a number of meetings and brainstormed some ways to sort of hold our community together in the classroom, which included things like setting up optional peer reviews for the final papers, asynchronous breakout discussions, and I even tried to find some fun prizes to give away for participation. I tried to make use of a lot of materials that I knew were already online, and on the web and when I could, I even invited a few experts and former students to record some short five minute videos on their take on some of the class topics. We had, for instance, a former student who's a video game designer came in to talk about Indigenous gaming. I think that the primary goal in March was to lessen the load for my students, for my TA and for me. My TA and I both held regular office hours and collab ultras sometimes, even together, where we basically just hung out and had coffee and invited students to drop in and chat.  But I also sent out a few general calls to all my students on more than one occasion that I would offer feedback on any thesis statement that they sent me for final essays. And that was no matter what state that thesis statement was in. That's not something I usually feel that I have the time for in sort of the hectic day-to-day life of general instructing. But with COVID, I felt I had a little bit more time, and it was actually something that I really enjoyed. More than half of the students ended up sending me some version of a thesis statement. And I really had a good time being involved in the writing process from the ground up and seeing how those ideas developed into the final papers. When we bring technologies into the classrooms and we get students engaging with digital tools, I'm teaching those tools, things are going to go wrong while I teach them. And so really foregrounding that in my pedagogy and being in conversation with students about that and saying, these things are going to go wrong at times in front of the classroom. But that is part of what it means to learn with technology, right? This is solving together is going to make the work that we do here stronger. And being willing to laugh at yourself and to not have your feelings hurt when students laugh at you in the chat or in other ways is part of it. I think for me, a story I have from the shift in March, one of the moments that really helped open things up for me is that I wanted to create that community feeling that I was worried we were going to lose. And so I was going to do a screening of a short film with students. And I was going to try and do that by screen sharing. And we students would come, you know, I was like, bring your popcorn and we'll all watch the short film together and then talk about it like we would have in class. But I didn't realize exactly how much bandwidth that was going to take to do a screen of a video and have 40 students in the space at the same time. And so that crash and my in the moment my solution was actually just to put that same video up on an iPad. And then I pushed behind my computer with the iPad and held it up. And the chat just hear the chat going bing, bing, bing, bing with students laughing and saying they couldn't move. And we all in the end, we ended up watching the film. We all had a good laugh. And you know what, that wasn't so bad. Like it actually, I think, worked in my favor. I think it actually broke the ice a little bit. It sort of took the seriousness up. It showed the students that I was making mistakes in the space as well, too. Recognizing that we're not in this alone, that all of, even folks like me who have experience teaching in little spaces and working with digital technologies are having these anxieties and like these moments in the middle of the night where we wake up going, oh my God, I have to get this class online. And I think where of that and realizing that it's OK to reach out to colleagues. It's OK to reach out to people in your own department, but also folks in CTLE or folks in anyone who else is teaching in this space, bearing those concerns and brainstorming together about potential ideas, I think, is can really alleviate some of that pressure and can give you a body to work through as your materials. I think for me that can be are really important is trusting your students, not going in classroom with a sense that students are out to get you, but that they are there as co-learners and that you succeed. Teaching is always taxing work. I find nothing more exhausting than a day of teaching. But teaching online is taxing in a different way and it is going to have an impact on your health and your just the way you feel and conduct yourself. So giving yourself space to feel that, making room to have that exhaustion and having support teams in place that you talk to, that you can vent with. I think a long way in making and hoping profs to find a sustainable path through this new world we live in.


Hi, everyone. Joe for Jaspy's casebreak.com with a good one here. 2022 Tops Dynasty Baseball. Five box, random team break number four. Yeah, high risk, super high reward. We comboed up a team, Rockies and A's, so it's only a 29 spot break. Big thanks to this group for making it happen. Thanks to all the people who bought their team straight up. That's always appreciated. And thanks to the people who got into those two fillers. Made those happen. Thanks for taking the risk and congrats to the winners. There's the combo right there. Let's do it. Let's roll it, randomized names and teams. Three and a two, five times each. One, two, three, four, and fifth and final time. Harry down to Chad. Three and a two, five times for the teams. One, two, three, four, and five. After five, we got the Pirates down to the Rockies, A's combo.  Now we're gonna pause the video. When we come back, we're gonna see if there's any trades, and then we'll have the break. So stick around, BRB. All right, welcome back everybody. No deals, we're done. So the list remains the same. Teddy? I'm about to start this dynasty, but Teddy Jaspy wants to take a look at the dynasty break. I'm about to start here. Good luck, everybody. Excuse me. Ted, of course, on the Instagram stream, I don't think we have any more dynasty for personal breaks, but Teddy has plenty of baseball on Instagram Live, Atch Aspies Breaks, right Teddy? Tell them what we got on there. Oh, we got the Canadian Club Chrome. Oh, that's all we got? I can't think of anything else. There's some stuff there. Check it out, Atch Aspies Breaks on Instagram Live. Seven nights a week. All right, there it is. Just one encased autograph, a relic card, or cut signature. Good luck. Good luck to the kings there in overtime right now. They have a little sponge piece over it. Yeah. You haven't done any? This is my first box of 2022 dynasty. Other way. Uh-oh. Maybe, no, maybe you're right. I don't know, is it label left side? Oh, label right side for landscape mode?  Big piece of lumber right there. My thumb's hiding the autograph. Can you tell by the bat who this would be? It is a Padre. It's Teddy's favorite, Manny Machado. One out of five. Andrew, with the Padres, Andrew. All aboard the Big Hit Express. Woo-hoo. He actually hates Manny Machado with a passion. A passion of a thousand years. A passion of a thousand sons. All right, but nice one for the Padres, Andrew, with that. All right, next up. Can you tell by his sunglass right there? It's a brave, it's Chipper Jones. 10 out of 10. Three color patch and autograph. Chip off the old block. That's for Tristan and the Braves. Was Tristan really going for that? Tried to trade, couldn't trade? All right, next one. Ooh, is that red or orange? Is that a one of one color? Passion color. It's a very passionate color here. It is Xander Bogarts. Five out of 10. Teddy, what are your thoughts on Xander Bogarts? I miss him, he's a great player. Teddy's a Red Sox guy, misses him. Xander, going to the still Red Sox. You're going to Allen, Matsui, and Boston. Box four. It looks like a big patch right here. Is that a Blue Jays number? Patch? It is. Matt Chapman, three out of five. Blue Jays numbering or lettering or something like that. But you can see the white in the middle of the blue, which I actually think looks pretty sharp. That goes to Toronto. That's for Mark. And the Blue Jays. Out of five, it's an under-trained whistle mark. All aboard the Big Head Express. Woo-hoo! And fifth and final box, ladies and gentlemen. Good luck. There's some pretty nice stuff here. Let's see what we got for this final hit. Ooh, a redemption. Interesting. Go big, baby. Congratulations. You are due to receive a Dynasty Autograph Patch Card of... Is it Julio Danny? S. A. Not Seattle, that's San-something. San Francisco or San Diego? San F. Buster Posey. And that's going to be for Eugene and the Giants, my rivals. There you go, Eugene. There you go, everybody. I'm Joe for jaspyscasebreaks.com. Thanks for watching. Thanks for breaking with us. And keep your eye out for more Dynasty on jaspyscasebreaks.com. Hopefully, we'll get some more. Thanks, everyone. I'll see you next time for the next one.


Tired of the everyday grind? Ever dream of a life of romantic adventure? Want to get away from it all? We offer you escape! Escape, designed to free you from the four walls of today for a half hour of high adventure. You are somewhere in the Pacific, out of Leyte in the Philippines. Charting a course of south by southeast. When out of the deep of the sea, a new volcano is born and your ship is caught in the middle of it. From which there is no escape. Listen now, as escape brings you Vincent McHugh's story, The Boiling Sea. It should have been an easy trip. It was the spring of 45, the war was almost over and what few jabs were left that far south didn't figure to give us any trouble. I was first made of the hope by victory hauling cargo with the landings in the Philippines. But this trip we detoured south to the Tiley Island of Karazouti and the Malukas to pick up a detachment of rangers, a demolition team, and bring them up to Samar. We cleared for the north about 18-30 hours and as darkness fell, I went out on deck. There I found Lieutenant Drury, the Ranger-C.O. and his top sergeant watching Gam-Kamura, the volcano over on the island. Hi, McCallum. Good evening, mate. Quite a sight, isn't it? Sure is, but it'll get better. We pass closer to it after nighting. In the dark you can see the lava spotting like 4th of July. We've got to look at a small one back on Kazarouti, inactive. This whole group of islands on both sides of the Strait is volcanic, you tell me. That's right. Now you can have my share of them. That big baby there used to keep us awake nights rumbling. Well, they aren't exactly conducive to peace of mind, I'll admit, Sergeant, but they're very interesting. I'd like a chance to study one more closely. No, not for me, Lieutenant. Well, probably won't get another chance now. The men all comfortable, Sergeant? Well, it ain't the Queen Mary, sir, but they're okay. Sorry, this baby wasn't meant for troop transport. No matter, we're used to improvising. Well, good night, gentlemen. Night, sir. Night, Daring. Nice guy. The best. One of them guys with principles. Serious. You know, educated. Them kind usually get clobbered first thing, but he's come through. Plenty. You have a time back there on Kazarouti? Not much. Jap radio station. Half starved out already. Of course they put up a fight they always do, but not so bad. Hey, look at that thing. Belch and smoke a mile high. Flashing like... Yeah. Spectacular, all right. Hey, Lieutenant, could I interest you in a human scalp tan with mangrove bark? Got me a couple of extra back there. Sell one cheap... Oh, thanks, Sergeant. I got one scalp. I hope that'll last me the run. That night, for the first time since we left home, I couldn't get to sleep. I tried reading a while and gave that up, too. Finally, I got a cup of coffee and took one up to Hanigan on the bridge. Hey, thanks, Mac. Just what I needed. We sipped our coffee quietly. The bosson stood silently at the wheel. The time was over 425 hours. We were steaming up through the Moloka Passage. Of course, one degree true, speed 18 knots. A smooth gentle swell. The phosphorescence and the bow wash was bright enough to show our hands and faces. It was peaceful. Hey, Mac. Hey, Mac, you smell anything? Coffee? No, come here. Stand over here.  That's what I thought, too, sir. Well, couldn't it say, isn't there a volcano over there in Halmahara where you might be getting a little land breeze? Yeah, but we passed it an hour back. I'll take it. Hey, Callum.  What's the matter, Brian? I just happened to notice my intake water's heatin' up. How much? Well, it's supposed to be about 25 degrees centigrade around here. It's 29 now. We're pullin' sludge, too. Looks like pumice. Okay. Guess you better call the captain, Hanigan. Smell that, Captain? Yes. You checked the ship, Mr. McCallum? Yes, sir. Boyd and Pullman went over it, too. Well, stop the engine. Yes, sir. Mr. Hanigan, you've checked our position? Yes, Captain. It's verified here on the chart. Sonic depth finder on, Mr. Grenjine? Yes, sir. Turned it out right away. Reads 1143, fabulous. Hmm. See here. This is where we are, about 35 miles west of Gumbaki in Halmahara, nautical miles, that is. Over here, you see? Less than three miles northwest, you've got a vegea. Somebody reported a shoal there once. Hasn't been found again since. Might be anywhere in the general vicinity. See here? It's marked 18 fathoms. E.D., existing staff room. Reported February 1871. I don't know if there is something there. It can't be anything but a submarine mountain. Not with those depths all around it. Yes, probably volcanic.  Got some of them up in the bull knees. But all we've got to go on is this old captain that came through here in 1871. Probably a whaler. I didn't care where he was so long as he had his foot on a fish. Can't tell, I suppose. Now, here's this old fellow dawdling through here in February. Northwest Monsoon at its height. Felly good winds, mostly north or western north. Current sets about two knots of the wind. So if he's out in his reckoning, you see, it's probably because he's whaler over to the south of east than he thought. Like this. That puts us pretty close to the trouble. We can't go up to the southeast because we don't know how far out he was. If he was out. Now here, we could go this way, but it seems foolish to backtrack on our course and then go west to get clear. Don't see why we wouldn't be safe if we cut across the angle to the southwest. Sounds right to me, Kevin. Yes, sir, it should be safe enough. Well, let's hope so. It's a grand gene, stand by the depthfinder and sing out if you get any shawling. Yes, sir. The ship was at dawn GQ where the engine stopped. The neary ocean silence hung over everything. It was still dark, but a soft glimmer was beginning to show behind the peaks and how they happened. Start the engines, half speed. Yes, sir, half speed. The returning pulse of the engines like a reviving heartbeat seemed to bring the ship back to life. You're about 225. 225. Our pie victory began to gather way, turning. The bosson got her around, met her and settled on course. Hattigan stood by the bridge farm. For minutes we stood quietly watching, waiting. Now there was a rosy smear in the east behind us, agloming on the sea. I could just make out the bow and a man silhouetted in the crow's nest above him. Engine room says 32 degrees centigrade, Captain. Up three degrees. Yeah. Stand on the phone, Mr. Hattigan, report any change. In another few minutes we'll be able to see a little more. Captain, man in the crow's nest, he's waving. Captain, the time of the race is 38 minutes. Rocks set ahead. Full left rudder. Full left rudder. We could see it now, not 500 yards ahead. Nothing in a nightmare had ever been so awful as that jagged rocky crest, hunching and lifting like the back of a great dawn lizard in the yellow light. It came fuming out of the seas, slimy with the first mud of creation. The slow swell pitched up on it. We could feel its deep grumbling roar through the noise of the engines. The ship was turning now, no one spoke. We stared with slow understanding of the horror that began to form in all our minds. The monster was not a single peak. The ridge we'd seen coming up in the southwest was extending. It's often a long curve of points and benches all across the south. Keep it turning. Keep it turning. But it was already too late. Clear across the red pink wash of dawn, a black spur joined under the east. And when we looked north, the swell was living up on a jag of new rock that thickened to the west and hooked our down into the southwest. The hope by victory was completely encircled. We were trapped in the middle of an emerging volcano. You are listening to The Boiling Sea, tonight's presentation of Escape. Keep the family intact this holiday weekend by driving safely. Observe speed laws. Stay on your side of the road and don't try to save time at the risk of losing a lifetime. Driving's more relaxed, more fun that way, and safer too. And now back to Escape and the second act of The Boiling Sea. Took a few seconds for the full impact of the situation to hit us and circled. Trapped in a crater of jagged rising peaks on every quarter of the compass. Still, nobody said anything until Captain Hazard spoke in a quiet voice. All right, stop the engine. Then we all know. The wash dropped away and the hope by victory settled, floating dead in a fuming black-brown lake that bubbles like mud coming to a boil. The terrible, stony, rumbling dried up through the soles of our shoes. I got you fellas into this. Oh, no, Captain, you did the best you could. How could anyone know where an uncharted mountain would come up out of the sea? Anakin. I don't want to get you fellas too excited up there, but you better quit smoking. We're getting 68 degrees centigrade on this thing. Got any eggs in one boiled? What is going on up there? Brownie, we're in a volcano. Well, I always told you something like this would happen.  Jonah made it. Yeah, we don't know. Maybe there's a hole in it somewhere. We can wait till it settles down, get the boats out. Yes, Mike, golly. Maybe not, Mr. McCallum. If we do a good job of surveying, maybe they'll forgive us for getting into it in the first place. No one mentioned the chance that we might never get out. We lived in the crater of a mountain in eruption. It was still working and thrusting, but its force had begun to die down. In the west and southwest, its highest peaks will maybe be 50, 60 feet above the sea. In the north and northwest, much lower, we could see the swell breaking over in two places. Mr. Hannigan, you will check and recheck the position. Yes, Captain. Mr. Grandjean, you will take bearings and measurements of the rim, starting at zero degrees and working all around the compass. Yes, sir. Mr. McCallum, you will pass the word and we're going to try getting out of here just as soon as the first shock is over. Don't want them to think we're not doing anything. Yes, sir. Might let the people down in the engine room know and the gun crew and tell Lieutenant Drury and his rangers. Yes, sir. All right? Thank you, gentlemen. I carried the message to the other officers. Men were hanging over the rail looking at the dead fish in the putrid water. Everybody was coughing. Sickly gases came up in spurts and slow blobs. Here and there, a small geyser patted down stones and mud on the water. There was a washer gloomy sun on the crags to the west. Beyond lay the glimmer of the Malooka Passage like the hope of life itself. It seemed very distant now. At breakfast, the captain was still cheerful. All right, gentlemen. We may as well eat. May not have another chance for a while. What do you think, sir? Well, look as if the first one is about over. We'll get the boats out after breakfast. See if we can't find a hole in it. Just a western omelet for me, mess. What if we can't do that, sir? Maybe we can find a place to get the boats across. It isn't far to Armahira, you know, about 36 miles, but I'd hate to... I wish I knew more about how these volcanoes behave. It might sink down again in an hour or two or it might keep building up. Could I make a suggestion, Captain Hazard? Yes, go ahead, Lieutenant Drury. My boys have trained in demolition work. If we can find the right place, I think we might be able to blast a hole big enough for the ship to get through. Yes, thank you, Lieutenant. Yes, we've been thinking the same thing. Only trouble is, a blast like that might set the whole business off. I suppose we'd better wait till we've tried everything else first. We take the boats out right after breakfast, sir? Yes, Mr. McCallum. You will take one and go north to the rim. Follow it to the east. Mr. Hannigan will take the other south and follow it west. Lieutenant Drury, a detail of your ranges can go in each boat. What about communication, sir? We don't have radios in the boats. We'll have to use flare guns. One flare if you find a hole big enough for the ship. Confirm it with a handlet. Then two flares to command. The usual recall signal. Yes, sir. Well, gentlemen, we're in God's hands now. 50 yards, sir. Here's her in slowly, bossing right into the rocks. Yes, sir. Take a look at that water, man.  I'm very inviting. Take a look at what's ahead, Lieutenant. Yeah. Doesn't look like any rock I've ever seen before. It's something monstrous, something tortured about it. Yeah. It's all yours, Lieutenant. Ready, Sergeant Vota? Ready, sir. Easy, bossing. All right, hold it. Steady. All right, you guys. Go! Get specimens of the rock. Vota, you're going up the top and check. Yes, sir. Doesn't look very promising. No, it's only 20 feet high, but we haven't got enough explosives to blast through here. Must be gaps somewhere. There's Vota on top. Vota, can you see anything? And he breaks to the east. Yeah, for sure, though. All right, come back. We'll go down farther. We cruise slowly along the rim through the dirty, brown, black, simmering waters, stopping every few hundred yards to break off specimens of rock. It was hot. We felt as if our bodies were drenched in a heated grease. The crater had a general downhill trend of the eastward. In the northeast sector, it came to what appeared to its lowest point. Here, the swell broke clear across the shallow peaks. This is the best place for blasting we've seen yet. Yeah, it doesn't look bad. It might be possible. Let me take four of my men on those rocks and try to find some likely openings for charges. Just in case. Okay. Move in close again, bosson. Listen, Drury, those rocks are wet, and that swell is plenty of power. Watch yourselves. Don't worry about us, matey.  Uh-huh. Set her easy, bosson. Okay, boys, over we go. Come on, get the lead out. Come on, bosson. You stand by with the lines secured, ready to toss them just in case. How about this, mate? You think we'll have to try it? Blaster, sir. I don't know, Walt. Looks like maybe, unless Hannigan found something, we should have been... I don't know. Blasting in this stuff is like lighting a firecracker in a dynamite factory. You may have to take the chance. Yeah. Now, look back there. I tore the ship.  We ought to break out the gas mess. We had gas, man. What is that? An explosion, sir. Underneath us. The whole thing's going up. No, no. It's sinking. Look. The men, they're sinking. From the line, bosson, hurry, heave. Drury, quick, pass it on. All of you, hurry. All right. They're all on. Heave. Bring them in. Heave. Fast as you can. Heave. Okay, here's Drury. Heave. Get them in. Hurry. Come on, hurry. Come on. What's happening? The whole thing's moving. Keep heaving. Boto. Where's Boto? We got him right here. Come on up. Heave. Oh, God in heaven. All right. Here's the next one. That'll be close to the three. All right. It's becoming easier now. Here's another. That's hangly. Poor. Come on, fella. Grab, huh? One more. Trouble, huh? All right. Get out of here. The line's coming too fast. Hey, sir. Trouble. Where's Trouble? Wait, Lieutenant. Stop him, Warren. Call it, Drury. You can't do it. Trouble's still in there. You can't go back in without a line. Tie it around his waist wall. I'm going to. All right, but tie into that line. Then we'll be able to haul you back. He's right disappearing into the murk on the sludgy water. The sharks are increasing in violence now. They jired their teeth in our heads. We looked toward this shipment, saw the western river, the crater thrusting up in a great wall behind it. Then Wall's head appeared close to the boat.   But Drury wouldn't give up. Come on. Pull him in. He's fighting us. Well, fight him back and get him into this boat. Yes, sir. Here. I'll give you a hand. Heave. Let me go. We've got to get trouble. Let me go. You can't waste any more time. Get in. It's no use drawing. But he's in there somewhere. We can't just let him stay there. No! No! All right, folks, take her up. I'm sorry about trouble, Lieutenant, but he is one man. There are a hundred men back there in the Hope by Victory. Yeah. Sorry. Being worse every minute. We're gonna do anything. We've got to do it fast. Hey, look! Over there with a rock sink. That gap's big enough for the ship. Yeah, maybe, but it's a deep one. It's gotta be. The whole thing may go up any minute like a Roman champ. All right, Boston, fire one flare. Walls, get the hand led. I've got it. All coils. Don't even drag it. Ten fathoms. We'll quarter across the gap. Sing out if you feel anything. The boat moved slowly across the old edge of the crater and out into the open sea. Walls holding the lead line, sugars headed. He felt nothing. He was carefully in the swell and courted back into the crater. I could see the Hope by Victory creeping toward us. She'd recalled Hannigan's boat and it was dragging ahead of her in a narrow-ass curve. They were like vessels under shell fire. The whole center of the crater was writhing with smoke and erupting guises of mud and stone. We could see rocks falling on the deck. Behind the ship, the western crags now jut at 300 feet high, lifting and working and black agon. The ship was coming on fast. We were the last chance. Did you feel anything, walls? Nothing. Can they make it, sir? They've got two fire, two flares. And we'll stand out to sea and make a target for them. Hurry. This thing's about to blow its top. All right, here too, boss. Inwards down here. You'll never make it. That gap's too small. We're tight squeeze. The captain's got it perfectly centered. I'll be better. It's coming full speed if he misses. Hiding it's through. Another minute we'll know. Men, if they crash, we'll have to work fast. Unless the shock is enough to set the whole thing off. Here they come. The swell's breaking on the ball. He's not slacking speed, and it's too small. It's too small. She's coming through. She's coming through. We're not out of this yet. Hey, he's not cutting his feet. He's not going to leave us here. Calm down. He's turning between the two boats. You'll get us on one side and can't get on the other. Look, captain's signaling from the bridge. First and give a full speed. Give her everything you've got. Parallel his course. Get the gear spot and hang on. We'll pick you up later. You heard him? More time, don't worry. Help me get that line while it's thrown down and don't miss. Power wash, bosson. Hold it alongside. All right, here comes the line. Got it. Make fast. Hurry before we lose the stock. And make it good and fast. Give the works, bosson. Hold her in. We're fast. Brother, just in time. All right, bosson. We've cut the engine. We're on the top. So we ain't going to sleep on a bed of coals tonight. Brother, I ain't never felt anything so good as to pull on that line. 20 knots. Full speed. Pulling us away fast. Maybe two miles already. You can't be too fast for me. Just look at that thing, will you? It's an inferno. Yeah, it's true. Did blow its top. Walt, help the bosson with the tiller holder in. Grab the gas-wap jewelry. Help me nod her back as far as we can. And stay down, everybody. Stay down. There's a wave coming. A tidal wave. Look at it. Come on. Come on. Pull. Everybody, keep down. We thought we were safe. It's 50, 60, maybe 100 feet. We'll take the whole ship. Keep down and hang on, then. Here it comes. Here it comes. Look out. I don't know how, but we're all right, man. Fave had lifted us to the level of the rail of the Hopi victory. But a seismic wave does not crest an open sea, so it came as one great smooth swell that lifted as high and passed and let us swoop back down again. A few minutes later, the ship picked us up and we all paused to look back at the emblem of fire we left behind us. Well, I guess maybe the captain was right. We must have been in the hands of God. All except trouble. Well, Lieutenant, you wanted to study a volcano close to... Did I? Well, remind me, Votor, to cross that study off my list. Escape, produced and directed by David Friedkin and Morton Fine, has brought you The Boiling Sea, a story by Vincent McHugh, and adapted for radio by John Dunkel. Featured in the cast were Ted D'Corsia, Herb Butterfield, Harry Bartell, Herb Ellis, and Tony D. Also heard were Jack Moyles, Clayton Post, and Jim Hayward. Your announcer, Bill Anders. The special music for Escape is composed and conducted by Leith Stevens. Next week. You are stranded with a carnival just this side of the iron curtain, when out of nowhere a fortune is within your grasp, riding a number on a roulette wheel hundreds of feet high. While at your shoulder, laughing at you, a killer clown from whom there is no escape. So listen next week when Escape brings you David Friedkin and Morton Fine's story, Carnival in Vienna. Stay tuned now for Night Watch, which follows immediately over most of these stations. There's comedy with my little Margie Sunday Nights on the CBS Radio Network.


Following a robbery at the Coldfield Jamboree, a non-profit theater in Logan West Virginia that was built in 1938, the theater was left with a loss of equipment, supplies, and cherished memorabilia. In addition to the lost equipment, the thieves left the doors open, leading the theater to incur a large electric bill. The owners are now asking for the community's help. We really don't know how they got in here. Still don't. But they came in, they told the police, they caught two of them, that they came in through the front door. And they were in here for a long time because they drank and had a party in here, so to speak. They smoked cigarettes all over the place and put out cigarettes, went downstairs and had a party under the stage, which is two dressing rooms. And they just carried everything to the exit doors down here close to the stage so that they could come back and get more of it. I think they took what they could carry that night. And it just so happened the guy who watches the theater came in to check, like he always does, and he found those doors open. Appalachian Community Care offers outpatient medication assisted treatment for addiction, counseling, and behavioral play therapy for children, accepting Medicare and all major insurance. Recovery is hard. Regret is harder. Appalachian Community Care, Pikeville, Whitesburg,<PHONE_NUMBER>, find them on Facebook. The Coldfield Jamboree is Logan's only downtown theater and regularly hosts schools, live music, and plays in hopes of incorporating arts into the area. The Jamboree is currently accepting donations to help replenish the theater and keep its doors open to the community. Well they could send it to the Coldfield Jamboree and if it's a check, which it should be a check, make it out to Coldfield Jamboree and put for a monetary donation to replace theater. We have little things happening all the time. You know our building is big, the roof sometimes needs repairs, things like that. We're having some problems right now with stuff, and it all costs a whole lot of money. But if anybody wanted to, it would be greatly appreciated. I'd like to invite everybody to the theater, and we're having a show March 30th, starts at 7 o'clock. I'd love to have anybody come. Reporting for Mountain Top News, I'm Brianna Robinson.


Hey guys welcome back to Come Again TV the only place on YouTube we're all geek culture collides I'm Shannon and today on the show this may not seem like a Christmas episode But I wanted to share one of my holiday traditions with each of you This is the aliens the board game from leading edge games I did a video on this a couple years ago of the gameplay We just picked up an actual copy of the game Because when my father-in-law passed away my brother-in-law inherited the actual game We got one of the boards that he had made for the game that we had Played on for the past several Christmases and thanksgivings So I wanted to go ahead and share this with each of you So stay tuned All right. So as I said, this is from leading edge games. It's aliens the board game. It came out in 1989 it's currently out of production Uh My wife managed to find this online I believe eBay she had to buy the uh miniatures separately, which we'll be getting into shortly For right now, let's go ahead and open up The box and take a look. Okay. So here's the game And I move this off to the side and here you have The colonial marine cards Uh, you use all the cards Uh in the game, so if you've only got four or five players then You're gonna double up on card on characters So there's that Here's the uh stands For those cards And for the characters themselves whenever you go onto the board Uh, this shows Like the aliens the uh face huggers and the queen What all uh effects they have when you roll a certain way We have this is where my wife got the uh game from A little promotional there lanes books So here's the guidebook pretty cool And then the expansion pack We love playing this on holidays Thanksgiving and Christmas are the main holidays that we use to play this and here Are the game boards so we got game board here On this side That goes all the way here And then we got this main part here Uh, you have to get From one side To the other this is the one we usually play and I'll show you how we usually play it Uh, as I said my father-in-law passed away earlier this year Uh, and he had actually made this board several years back For the game He made it out of wood So Yep, you start down here If you can see You start down here and you've got to make it all the way to the exit there These are just uh spots in the board you're not allowed to move just like on the map here Uh, and this is really Um It really takes after the movie It's almost identical to the movie uh gameplay wise so If you want to see Some actual gameplay of this game Then I'll link the video In the description And uh, probably at the end of the video So let's go ahead and put these That actually There was something else in here The rules the rule manual Right here And we were quite happy to uh Find this online It's uh It's definitely become a tradition in our house Here's some of the uh Cards You got Hicks You got Ripley Newt Gorman Burke Crow Dietrich Drake Hudson You got Wozzebowski Farrow Frost Sponkmeyer And Bishop Did we miss one? Hicks Ripley You know what we are missing apone Yep We are missing apone Um I think that's the only one we're missing Yeah Hmm So we did not get a complete Game board Or game I think my wife printed out some of these cards though Uh As well and I think apone's in with them So it's no it's not really a big deal And we need to get the character cards that go in these they're little Rectangular pieces kind of about this size They go in them Or no No they're not I'm sorry I forgot We get we do the figurines We do the figurines which Are right in here So let's go ahead And open these up And we'll take a look Some of them are painted some of them aren't Right here we've got Bishop And my wife's gonna get some washers to put these on because I think that's what my father-in-law had His on were some washers I mean they stand up okay, but And then this one Can't really tell the name on that apone The only card we're missing But here's some of the colonial marine figures figurines They go with the game Here's a few more Got frost which I think there's another one we might be missing We're gonna have to double check And we got a few of the aliens here we need to get some more aliens And it looks like One of their heads broke off But it's an easy fix just some solder But yeah, this is My family's favorite Game to play on the holidays My wife and my father-in-law are big Well, my wife is my father-in-law was a big aliens fans It's her favorite movie out of the entire franchise So we like to play this on the holidays Thanksgiving usually after dinner. We didn't play it this year Because we're still waiting to get some more pieces for the game Probably won't play it for Christmas either because we're still waiting on some more pieces But definitely next year we're going to Restart the tradition I highly recommend playing this game. Again, it's from leading edge games There are some places in the universe you don't go And here's the back of the board game if you can read that And yeah, um If you're able to get it, I highly recommend it start your own family holiday traditions and play Aliens of the board game I've been shan and this been comic again tv the only place on youtube where all geek culture collides Take care geeks If you enjoyed that video make sure you hit the subscribe button right there So you stay up to date on all thanks geek culture Also, go ahead and check out one of these two playlists on the side for more videos just like the one you just watched I'm shan and for comic again tv the only place on youtube where all geek culture collides Take care geeks