[User] Please transcribe this text

[Assistant] The coal mining, the potteries, the steelworks. And then on the other hand, you have the new discoveries, kind of scientific disciplines are emerging, astronomy, chemistry and electricity. So there are new discoveries happening. And Britain is marching towards progress.


[User] Please transcribe this text

[Assistant] And he displayed them in seven bays, which was, uhm, the Bible, the Genesis. So the religion is at the top, the science is at the bottom.


[User] Please transcribe this text

[Assistant] What this was, this was the entrance to the garden. So his visitors would come in, would be educated about the latest scientific knowledge, meanwhile being reminded that behind all this creation is still the divine architect. And then they would enter the garden, which is really, it's almost like they enter the garden of Eden.


[User] Please transcribe this text

[Assistant] She comes from a very well-respected Cheshire family. Kind of in the...


[User] Please transcribe this text

[Assistant] I think James Bateman is a very confident young man. He writes a letter in February 1835 when he's just 23 years old.


[User] Please transcribe this text

[Assistant] To the 6th Duke of Devonshire at Chatsworth is...


[User] Please transcribe this text

[Assistant] Beautifully written, because he wants to make a very good impression.


[User] Please transcribe this text

[Assistant] This is one of the wealthiest landowners in the whole of the country. And he writes to him and he says,


[User] Please transcribe this text

[Assistant] To this, you know, other social class where he's really not part of at all.


[User] Please transcribe this text

[Assistant] Chatsworth at that time, in the, in the mid-1830s, is one of the most spectacular gardens in the country. I mean there, there are gardeners going on a horticultural pilgrimage up to Chatsworth.


[User] Please transcribe this text

[Assistant] I diverted much of my time to growing or attempting to grow the different tropical fruit trees. So he's talking, you know, he's violently smitten.


[User] Please transcribe this text

[Assistant] Now at that time, glass is quite heavily taxed. So this is very expensive just in terms of the materials. And it's only five years later, in 1845, that the glass tax gets repealed.


[User] Please transcribe this text

[Assistant] So it's this extraordinary moment when the, when the glass house is finished, when they have to fill it. And gardeners like Bateman are very happy to offer some of their plants for this.


[User] Please transcribe this text

[Assistant] This diary gives us glimpses of how they worked together here, but also what kind of stuff they did. So for example, I found one entry where Cook and Bateman go together to the Great Exhibition in London, and this is what it says. Mr. Bateman called early and I went with him to Gardens and Great Exhibition.


[User] Please transcribe this text

[Assistant] Home at 12, very cold east wind. Always mentioning the weather, very important. Then a few days later, they go again, and it says, Mr. Bateman called. I met him at the Grey Exhibition at 5, saw Egypt. Now those two words, saw Egypt, they tell us a lot about a particular part in this garden.


[User] Please transcribe this text

[Assistant] What I think really must have blown them completely away was the Egyptian court at the great exhibition. So you had this huge space in the Crystal Palace which was dedicated to Egypt and when you look at pictures of it now you see


[User] Please transcribe this text

[Assistant] Dozens and dozens of those guys, huge, uhm, sitting exactly this way, lined up one after another, and they went there to see that, so,


[User] Please transcribe this text

[Assistant] You can, you can see how they take that journey from the great exhibition and kind of bring it into the garden here.


[User] Please transcribe this text

[Assistant] The whole exhibition is one big build up to show the world how great Britain is, and in a way that's what Bateman is doing here.


[User] Please transcribe this text

[Assistant] And it's their most popular pattern, and what you can see here is you can see a Chinese scene, you can see a willow tree, you can see a Chinese temple, you can see uhm, a Chinese boat, a Chinese bridge, a Chinese fence, and it's almost like as if he took


[User] Please transcribe this text

[Assistant] This plate into his garden and try to recreate exactly this.


[User] Please transcribe this text

[Assistant] His evolutionary theory, which is the most important book in the 19th century and that changes everything. And Darwin and Bateman knew each other.


[User] Please transcribe this text

[Assistant] So these two really did not agree at all.


[User] Please transcribe this text

[Assistant] So when you read through Cook's diary, towards the end,


[User] Please transcribe this text

[Assistant] There's an entry which reveals a little bit to us that this might be the beginning of the end of this garden, because on the 24th of September, 1869, there's an entry which says, Mr. Bateman wrote a sad letter. It's a letter in which he explains why he's intending to sell Biddulph Grange. He says,


[User] Please transcribe this text

[Assistant] I only wish now that I had not laid out so much money upon it.


[User] Please transcribe this text

[Assistant] You know, he did spend a fortune on this garden. By that time, he has a mortgage of 35,000 pounds.


[User] Please transcribe this text

[Assistant] He has really thrown money onto this place and, and, but he's ready to sell it.


[User] Please transcribe this text

[Assistant] You know, the thing that they are clearly most passionate about, that they can't take. So they're leaving behind China, Egypt, all their plants, the ferns. All of that stays here. So it must have been absolutely heartbreaking to pack up the house and leave the garden behind.


[User] Please transcribe this text

[Assistant] Hello, this is 6 Minute English. I'm Sam. And I'm Rob. Before you got your first job, Rob, did you do any work experience?


[User] Please transcribe this text

[Assistant] Some companies offer students or recent graduates what they call internships. These are extended periods of work experience where someone can be working full time without an actual contract and in many cases without even being paid.


[User] Please transcribe this text

[Assistant] Yes, although the counter-argument is that internships are valuable experience for people who need it before they can get a real job.


[User] Please transcribe this text

[Assistant] Well, we'll look at this topic a little more after this week's quiz question. On the topic of business and companies, which is the oldest stock exchange in the world? Is it A, Bombay, B, New York, or C, Amsterdam? What do you think, Rob?


[User] Please transcribe this text

[Assistant] Okay, well I will reveal the answer later in the programme. James Turner is the chief executive of an education charity. Recently he took part in a discussion on the BBC radio programme You and Yours on the topic of internships. What does he think is a big issue with unpaid internships?


[User] Please transcribe this text

[Assistant] The more difficult it can be to get a good job even if you have the ability.


[User] Please transcribe this text

[Assistant] No, I can barely afford to live in London as it is, so the idea of doing an unpaid internship would not appeal to me at all.


[User] Please transcribe this text

[Assistant] Turner goes on to talk about other issues that are also problematic in internship programmes.


[User] Please transcribe this text

[Assistant] Yes, it's a lot easier if your family is well connected, if it has a lot of contacts and links to a particular company or important people in that company.


[User] Please transcribe this text

[Assistant] So it seems that to be able to do an unpaid internship, you need to have a fair bit of money and to get an internship in the first place, you may need to have a previous link to the company through a family connection, for example.


[User] Please transcribe this text

[Assistant] Right, time now to answer this week's question. Which is the oldest stock exchange in the world? Is it A, Bombay?


[User] Please transcribe this text

[Assistant] B, New York or C, Amsterdam. Rob, what did you say?


[User] Please transcribe this text

[Assistant] Well done, that's correct. Congratulations to everyone who got that right. And extra bonus points if you know the date, Rob.


[User] Please transcribe this text

[Assistant] Hmm, actually it's a lot earlier. 1602.


[User] Please transcribe this text

[Assistant] Right. Let's have a look again at today's vocabulary. We've been talking about internships, which are periods of work at companies as a way for students or new graduates to get experience in a particular field.


[User] Please transcribe this text

[Assistant] Yes, the cost rules them out. It excludes them from the opportunity.


[User] Please transcribe this text

[Assistant] And also if your family is well connected. If it has good connections, for example, if your father plays golf with the CEO, it can open doors. Or in other words, it can make it easier to get into the company.


[User] Please transcribe this text

[Assistant] James Bateman would have wowed in the daily walk. He was in love with these flowers, so he would show them off to the best potential. I'm sure he'd have done a better job than us, to be honest.


[User] Please transcribe this text

[Assistant] This is one of his eccentricities. This is a sudden change, so you're in a completely different part of the world, and you've got different architecture.


[User] Please transcribe this text

[Assistant] This is James Bateman's dream, this is his ideal tree, and he must have been so proud of them, although obviously he didn't see them at this size.


[User] Please transcribe this text

[Assistant] He had a thing about roots, he wanted, he loved the whole of the tree, not just, not just the leaf or the form, he liked everything about it. The whole thing, top to bottom, yeaah.


[User] Please transcribe this text

[Assistant] I'm just really grateful that this is what he chose to put his money into. I mean, the Victorians threw their money at industry, engineering, all kinds of things, but we're incredibly lucky that Bateman had a passion for plants.


[User] Please transcribe this text

[Assistant] I do want to come back as an old age pensioner and see them twice this height.


[User] Please transcribe this text

[Assistant] The uni is not fishy. It actually tastes like the ocean.


[User] Please transcribe this text

[Assistant] Let's start this section by learning about array destructuring.


[User] Please transcribe this text

[Assistant] So as I said in the intro video, in this section we're basically going to continue learning basic syntax and basic JavaScript features. But now with a focus on more modern JavaScript.


[User] Please transcribe this text

[Assistant] And the theme of this section will be to simulate a foot delivery application. And in specific one Italian restaurant, which is this starter data here that we already have in the starter files. And so this one is called Classico Italiano.


[User] Please transcribe this text

[Assistant] So I already opened up, uh, the starter files here for this project. Okay?


[User] Please transcribe this text

[Assistant] Now, learning complex topics like the ones we're gonna dive into in this section is really best done in isolation.


[User] Please transcribe this text

[Assistant] This way you can understand exactly what I'm trying to teach you without having to think about five other things at the same time. And so I'm isolating just this one restaurant and building no user interface so that we can focus just on the JavaScript language here.


[User] Please transcribe this text

[Assistant] And some people will say that this is boring.


[User] Please transcribe this text

[Assistant] Believe me, I do have enough teaching experience to know that some topics are best learned in isolation. And for me, the most important thing is that you will actually learn in this course.


[User] Please transcribe this text

[Assistant] Now of course, there are also topics that can be applied to a visual project. And that's why in the next section, we have a really, really cool project with an amazing user interface where we're going to learn about array methods.


[User] Please transcribe this text

[Assistant] But for now, let's focus on built-in data structures and modern advanced operators. And again, starting with array destructuring.


[User] Please transcribe this text

[Assistant] So destructuring is an ES6 feature and it's basically a way of unpacking values from an array or an object into separate variables. So in other words, destructuring is to break a complex data structure down into a smaller data structure like a variable.


[User] Please transcribe this text

[Assistant] So for arrays, we use destructuring to retrieve elements from the array and store them into variables in a very easy way.


[User] Please transcribe this text

[Assistant] So let's just actually start with a very simple array.


[User] Please transcribe this text

[Assistant] And now, if we wanted to retrieve each one into its own variable without destructuring, we would do it like this.


[User] Please transcribe this text

[Assistant] Let's say we wanted to name them a, b, c. And so we would write the name of the array, which I totally forgot up here.


[User] Please transcribe this text

[Assistant] So r0, and then just duplicating this line, which I'm using command or option l for. And I'm not sure if that is actually a shortcut in VS code. Let me see here. And apparently it's not.


[User] Please transcribe this text

[Assistant] Let's see here. Duplicate selection. So it's this duplicate selection here and you can set up a shortcut for that. And so I will just do that.


[User] Please transcribe this text

[Assistant] So b, and so that would be element number one, and number two would be


[User] Please transcribe this text

[Assistant] So that's how we would retrieve these three elements. But now with the structuring, we can actually declare all the three variables at the same time. So let me show you how.


[User] Please transcribe this text

[Assistant] So const, and then we use the square brackets, and so that's because we are destructuring an array. And so now we can declare three variables at the same time. And now I'm not using a, b, and c, because we already used them. So let's go with x, y, and z.


[User] Please transcribe this text

[Assistant] And then, I will simply set that equal to the array. And that's it. Let's actually see them now in the console.


[User] Please transcribe this text

[Assistant] Give it a save and then we need to start our live server with a new terminal.


[User] Please transcribe this text

[Assistant] And actually I can hit the tab key now and it will then automatically write the rest of the command.


[User] Please transcribe this text

[Assistant] And as you can see, here we get the two results, two, three and four. So the elements of the array.


[User] Please transcribe this text

[Assistant] So basically, we write this syntax here, and then this will become the first element of the array, this the second, and this the third. And so this here is destructuring this array here from the right side.


[User] Please transcribe this text

[Assistant] Okay, and of course, this looks like an array, but it's really not. It's just the destructuring assignment.


[User] Please transcribe this text

[Assistant] So whenever JavaScript sees this here on the left side of the equal sign, it knows that it should do destructuring. Now when you do this, just don't forget to actually also declare the variables using const.


[User] Please transcribe this text

[Assistant] Okay, and I also wanted to notice that even though we did destructuring, which sounds kind of destructive, right, the original array is of course not affected.


[User] Please transcribe this text

[Assistant] Okay, so we are not destroying here the array. We are only destructuring. So we are unpacking it.


[User] Please transcribe this text

[Assistant] Okay, and now let's work a little bit with the data from our restaurant. So here we see that we have a couple of arrays here actually. So the categories, the starter menu, and the main menu. So let's take some elements out of the categories. So let's say


[User] Please transcribe this text

[Assistant] And then the destructuring assignment.


[User] Please transcribe this text

[Assistant] And second. All right. And so now you see here that we do not have to take all of the elements out of the array. So this will just take the first and the second. So it will simply follow the order of the elements here and will basically only take these two.


[User] Please transcribe this text

[Assistant] And so now the array from which we want to extract and that's restaurant.categories.


[User] Please transcribe this text

[Assistant] And indeed we get Italian and Pizzeria, which are exactly the first two elements of the array. But now let's say that we only wanted to take the first category


[User] Please transcribe this text

[Assistant] So this one and the third. So let's say that this one is the main category and this is the secondary for some reason. Well, to do that, we simply leave a hole in the destructuring operator.


[User] Please transcribe this text

[Assistant] So what I mean is just this. And so now the second element will be skipped, so the one that would go here, and then this second here, uh, simply becomes this third element.


[User] Please transcribe this text

[Assistant] And now, so you see that second now is vegetarian, which is element number three. All right. And so like this, we don't have to create a variables for all the stuff that we might not even need. So if we only need to take this and this, we just skip the element in the middle.


[User] Please transcribe this text

[Assistant] And this is really powerful and we use destructuring to do a lot of cool things.


[User] Please transcribe this text

[Assistant] For example, let's say that the owner of the restaurant now decided to switch the main and the secondary category. So right now the primary is Italian and the secondary is vegetarian. But now they wanted to switch it. So, uh, let's first change the name here to main and


[User] Please transcribe this text

[Assistant] Secondary, just to make it a bit more obvious. You can't hurry. And so if we would like to switch these two variables, then without destructuring, we would have to do it like this. We would need to create a temporary variable.


[User] Please transcribe this text

[Assistant] And then to that we would assign one of them. So let's say main. And then we could switch main. We would say main is equal to the secondary. And then secondary is equal


[User] Please transcribe this text

[Assistant] Because that's where we temporarily stored the value of main, right? We could not just do main equals secondary and then secondary equals main, because by then we would already have overwritten the main variable, right? And that's why we need this temporary variable in the middle.


[User] Please transcribe this text

[Assistant] So that's how we would do it. But with destructuring, we can make it a lot easier. And this is how we do it. First, we create an array with both of them. And the first one is going to be the secondary.


[User] Please transcribe this text

[Assistant] And then the second one will be the main. And actually before we do that, let me just show you that this worked.


[User] Please transcribe this text

[Assistant] So main and secondary. And so now we should see them switched.


[User] Please transcribe this text

[Assistant] Oh, okay. Uh, here we need to change, of course, to LED.


[User] Please transcribe this text

[Assistant] Because we are reassigning here to a const in line 24.


[User] Please transcribe this text

[Assistant] So let's try that now, and indeed, what was Italian is now vegetarian, and what was vegetarian is now Italian.


[User] Please transcribe this text

[Assistant] So this here worked indeed, but let's now take this out so that we can do it using destructuring.


[User] Please transcribe this text

[Assistant] So as I was saying, in order to switch the two variables using the structuring, we would first start by creating a new array with the two variables inverted. So first secondary and then main. And then we can simply destruct them.


[User] Please transcribe this text

[Assistant] And secondary equals the destructuring of this array. And now we're not using let or const here because we are simply reassigning the values of the two variables. So just like we did here. But now we do not need a temporary variable in the middle.


[User] Please transcribe this text

[Assistant] So let's check now. And indeed, the result is the same. But this is a lot easier. And this is a trick here that I actually use all the time. So let me just show here, or actually write here, switching variables.


[User] Please transcribe this text

[Assistant] So that's a pretty cool trick. And another trick with destructuring is that we can have a function return an array and then we can immediately destruct the result into different variables.


[User] Please transcribe this text

[Assistant] And so this basically allows us to return multiple values from a function. And so let's try that and write a function to order food.


[User] Please transcribe this text

[Assistant] So here in our restaurant, let's now add a method. And I'm going to call it order.


[User] Please transcribe this text

[Assistant] So this will be a function, and it will accept two parameters. One index for the starter menu, so this menu, and then one index for the main menu.


[User] Please transcribe this text

[Assistant] And then the person will order, uh, basically by giving the index for each of the menus. So something very simple just to illustrate the point here. So let's say starter index and main index.


[User] Please transcribe this text

[Assistant] Okay, and so we will simply now return the content of the arrays based on the given indexes. So return.


[User] Please transcribe this text

[Assistant] And so as I said, we're going to return an array and then we go to this.starter menu.


[User] Please transcribe this text

[Assistant] Okay, and remember how this keyword here is set, as we learned in the last section. And so now we go to the position of the starter index that we passed into the function. Okay, that makes sense. Then the same with the main menu.


[User] Please transcribe this text

[Assistant] Add the position of the main index that is passed in.


[User] Please transcribe this text

[Assistant] Alright, so here we are of course not doing any destructuring yet, but now is the time where we will do it. So let's call order or in fact restaurant.order


[User] Please transcribe this text

[Assistant] And let's use two and zero. So we want element number two from the starter menu. So the garlic bread and the number zero from the main menu, which is pizza. So we're going to receive an array with that.


[User] Please transcribe this text

[Assistant] And indeed, it is garlic bread and pizza. And so now, we can simply destructure that.


[User] Please transcribe this text

[Assistant] So, this is the destructuring assignment, and so let's say starter and main should equal these two results.


[User] Please transcribe this text

[Assistant] Oh, and now this was already defined before, so let's just call this one here the main course.


[User] Please transcribe this text

[Assistant] And now indeed, we get garlic bread and pizza.


[User] Please transcribe this text

[Assistant] Alright, so this is how we basically receive two return values from a function.


[User] Please transcribe this text

[Assistant] Alright, so of course we could have done that without destructuring and still return an array from the function, but this is a very handy way of then immediately creating two variables out of one function call.


[User] Please transcribe this text

[Assistant] Okay, and now that you understand how the structuring works, let's take it one step further. Because what happens if we have a nested array? So let's say, nested.


[User] Please transcribe this text

[Assistant] And with nested we mean one array inside another. So let's say that we now here have another array, 5 and 6.


[User] Please transcribe this text

[Assistant] So an array inside an array. And I'm not sure if we did that before, but of course that's perfectly acceptable. So as a small exercise, uh, how can we get this value here and this entire array?


[User] Please transcribe this text

[Assistant] Well, we simply define two new variables using the destructuring assignment. Let's call them i and j. And remember that we do not want the one in the middle. So we just skip it. So simply leave a space, and then another comma, and then this one is gonna be j.


[User] Please transcribe this text

[Assistant] Equals to the array from which they should be taken.


[User] Please transcribe this text

[Assistant] And indeed, we get the number 2 and then the array 5 and 6. Great, but what if we actually wanted all the individual values? Well, then we would essentially have to do destructuring inside of destructuring. So that sounds complicated, but it's not.


[User] Please transcribe this text

[Assistant] So let's take out these here, and let's create now three variables. So one for this, one for the five, and one for the six. So we're gonna skip the four again. So that's gonna be i, then again the whole here,


[User] Please transcribe this text

[Assistant] And now here we can destruct this inner array immediately. So we use the destructuring here again. And so now j for the first element and k for the second. So for 5 and 6. And then again the array from which to take.


[User] Please transcribe this text

[Assistant] And then let's take a look. And so this should now give us 2, 5 and 6 as separate variables. And yes.


[User] Please transcribe this text

[Assistant] That's how nested destructuring works. Basically, we need to do destructuring inside of destructuring.


[User] Please transcribe this text

[Assistant] Okay, and now to finish, there's just another feature of destructuring that I want to show you.


[User] Please transcribe this text

[Assistant] So, we can also set default values for the variables when we are extracting them. And that's going to be very useful in the case that we don't know the length of the array. This can sometimes happen in real world applications, as you will see later.


[User] Please transcribe this text

[Assistant] So if we have an array that is shorter than we might think, then we might try to unpack the array in positions that don't even exist. So let me say here just default values in tiered, uh, nested.


[User] Please transcribe this text

[Assistant] Destructoring. So learning a lot of stuff here about destructoring.


[User] Please transcribe this text

[Assistant] And so let's now say that we have this array, 8 and 9, and then we are trying to destructure it. So just pretend that we actually don't know the array. Alright?


[User] Please transcribe this text

[Assistant] And so we might try to take three elements out of the array using again destructuring. So let's call them p, q, and r.


[User] Please transcribe this text

[Assistant] And then let's try to log them all. P, Q, and R. And so now here we get undefined as the third one.


[User] Please transcribe this text

[Assistant] So this would basically be the same as trying to read the element at position number 2 of this array. But it only has elements at position 0 and 1. And so therefore we then get undefined.


[User] Please transcribe this text

[Assistant] As I said, we can set default values. So let's simply set them all to.


[User] Please transcribe this text

[Assistant] Great. And if we remove this element, then q will also become 1.


[User] Please transcribe this text

[Assistant] Okay. And as I said, this can sometimes be useful, for example, when we get data from an API. And so we're going to probably use this one and actually everything that we did in this lecture a bit later in the course.


[User] Please transcribe this text

[Assistant] One minute, 45 seconds is up and I take them out and plunge them into an ice bath. Come on, Tam. You gotta hustle now, Tam.


[User] Please transcribe this text

[Assistant] So I've made pork dumplings in a spicy salty broth with soy quail eggs.


[User] Please transcribe this text

[Assistant] Hello, this is 6 Minute English from BBC Learning English. I'm Neil.


[User] Please transcribe this text

[Assistant] Last November, NASA launched a very unusual home delivery service – a rocket carrying four tonnes of supplies to the ISS, the International Space Station.


[User] Please transcribe this text

[Assistant] The astronauts might have wanted a glass of wine with dinner, but the real purpose of the bottles was to explore the possibility of producing food and drink in space – not for astronauts, but for people back on Earth.


[User] Please transcribe this text

[Assistant] And we'll hear how plants can grow in environments with little or no natural light. But first, today's quiz question. What was the first food grown in space?


[User] Please transcribe this text

[Assistant] Now, you might be wondering how it's possible to grow plants without natural light.


[User] Please transcribe this text

[Assistant] British company Vertical Future has been working on this problem by developing indoor farming methods in partnership with NASA.


[User] Please transcribe this text

[Assistant] The lack of natural light in space means that plants are grown using LED lights.


[User] Please transcribe this text

[Assistant] LED is an abbreviation of light emitting diode.


[User] Please transcribe this text

[Assistant] An electronic device that lights up when electricity is passed through it.


[User] Please transcribe this text

[Assistant] But when scientists control the wavelengths being fed, plants are able to absorb every photon, particle of light energy making them appear black.


[User] Please transcribe this text

[Assistant] But the lack of natural light isn't the biggest obstacle to growing food in space.


[User] Please transcribe this text

[Assistant] Here's Joya Massa, chief plant scientist at the Kennedy Space Center in Florida, to explain.


[User] Please transcribe this text

[Assistant] In the low-gravity atmosphere of space, plants become stressed, but they adapt genetically.


[User] Please transcribe this text

[Assistant] Like those bottles of red wine orbiting Earth as we speak.


[User] Please transcribe this text

[Assistant] The effects of microgravity on the wine's organic composition will be studied


[User] Please transcribe this text

[Assistant] And could hopefully offer solutions for growing food in Earth's changing climate.


[User] Please transcribe this text

[Assistant] Ah yes, in today's quiz question I asked what the first plant grown in space was.


[User] Please transcribe this text

[Assistant] B. Lettuce grown over 15 months on the ISS.


[User] Please transcribe this text

[Assistant] And eaten in 15 minutes in the first ever space salad.


[User] Please transcribe this text

[Assistant] The energy needed for plants to grow is contained in photons, or light particles travelling at different wavelengths.


[User] Please transcribe this text

[Assistant] Distances between light waves, which make things look different colours.


[User] Please transcribe this text

[Assistant] Luckily plants use their genes, the chemicals in DNA responsible for growth,


[User] Please transcribe this text

[Assistant] ...to adapt to new environments by changing their biological structure, a process known as plasticity.


[User] Please transcribe this text

[Assistant] And genetically stronger plant specimens to study back on Earth.


[User] Please transcribe this text

[Assistant] Our company has decided to cut down our workloads, so from now on we leave at 3pm every Friday.


[User] Please transcribe this text

[Assistant] Previously, we defined what data analytics is, and you got a glimpse at the job of a data analyst. As you learned, data analytics involves lots of different steps, from collecting and cleaning data to categorizing, analyzing, and interpreting data to help in decision-making.


[User] Please transcribe this text

[Assistant] Add to that the fact that there's a lot of data available to work with, and the job could quickly become overwhelming.


[User] Please transcribe this text

[Assistant] That's why it helps to have a framework you can come back to throughout all data analytics projects. Having a framework to use can help data analysts organize their work processes and strategies so that they can accomplish projects efficiently and effectively.


[User] Please transcribe this text

[Assistant] A framework also outlines key steps that should be taken during each stage of the process, helping to ensure accuracy and consistency throughout the entire data analysis process.


[User] Please transcribe this text

[Assistant] In this lesson, I'll introduce a framework that I found helpful when approaching data analysis, the awesome framework. So let's get started.


[User] Please transcribe this text

[Assistant] So we talked about destructuring arrays, but we can also destructure objects. So let's do that now.


[User] Please transcribe this text

[Assistant] And this time, let's actually write the code before the previous lecture. So right here after this restaurant object, so that we don't have to scroll too much.


[User] Please transcribe this text

[Assistant] Also, I added this object here to the restaurant object, and so that was already in your starter files, but I didn't have it here yet.


[User] Please transcribe this text

[Assistant] Anyway, let's now talk about object destructuring. And so to do that, we use the curly braces to destructure. So to destructure objects, we use the curly braces, because this is also how we create objects, right?


[User] Please transcribe this text

[Assistant] Then all we have to do is to provide the variable names that exactly match the property names that we want to retrieve from the object.


[User] Please transcribe this text

[Assistant] So the obvious choice here of object to the structure is restaurant. So let's take the name, categories, and opening hours.


[User] Please transcribe this text

[Assistant] So again, let's start with const in order to actually define some variable names. And now, as I said, we need to write the exact property names here to now extract variables from this object.


[User] Please transcribe this text

[Assistant] Now, since in an object the order of elements does not matter, we don't need to manually skip elements like we did in an array. So we can simply write name.


[User] Please transcribe this text

[Assistant] So that's the restaurant name here. And then also remember that in objects, the order of the elements does not matter. And so we can also then take now the opening hours.


[User] Please transcribe this text

[Assistant] Which is kind of the last property and only then, uh, the categories.


[User] Please transcribe this text

[Assistant] And then we simply say equal restaurant. So that's exactly the same as with arrays.


[User] Please transcribe this text

[Assistant] But now here we use the curly braces, and we have to specify the name of the properties. But just like with arrays, this now creates three brand new variables, so based on this restaurant object.


[User] Please transcribe this text

[Assistant] Okay, so that's the fundamentals of destructuring objects.


[User] Please transcribe this text

[Assistant] And once again, this is an extremely useful addition to the language, especially when we deal with the result of an API call, which basically means to get data from another web application like weather data or data about movies or something like that.


[User] Please transcribe this text

[Assistant] And this data usually comes in the form of objects, basically. And then destructuring is really a lifesaver. It allows us to write a lot less code.


[User] Please transcribe this text

[Assistant] So this is really used in modern applications. But now, what if we wanted the variable names to be different from the property names? Well, we can do it like this.


[User] Please transcribe this text

[Assistant] Now of course we still need to reference the property names like we did before, otherwise JavaScript has no way of knowing what we actually want. So let's write name again, but then we can use the colon and specify a new name. Let's say we actually want it to be called


[User] Please transcribe this text

[Assistant] Restaurant name. And then here, let's say we want the opening hours, but we want the variable to be called just hours. And then once again, we want to take the categories, but we want the variable name to be called tags.


[User] Please transcribe this text

[Assistant] And then again equal to restaurant. And so the variables that we now created are called restaurantName.


[User] Please transcribe this text

[Assistant] That these three are actually the exact same name.


[User] Please transcribe this text

[Assistant] Uh, for when we are dealing with third party data like that, so like an object that we get from somewhere else, for example an API call, as I was just explaining, uh, it can be really useful to have default values for the case that we're trying to read a property that does not exist on the object.


[User] Please transcribe this text

[Assistant] So usually then we get an undefined. For example, if we were trying to say restaurant.


[User] Please transcribe this text

[Assistant] .menu, this would be undefined, because there is no property called menu. We have starterMenu and mainMenu, but not just menu.


[User] Please transcribe this text

[Assistant] Okay, and so we can set default values.


[User] Please transcribe this text

[Assistant] Just like we can actually in arrays.


[User] Please transcribe this text

[Assistant] Let's say that we are trying to destructuring the menu. And so we use equal to set a default value. All right. And then we can do the same with the starter menu, for example. And then we can even combine this syntax here with what we did previously.


[User] Please transcribe this text

[Assistant] Let me show you. So let's say that we're trying to retrieve the starter menu.


[User] Please transcribe this text

[Assistant] So this one, but we then want to give it another name.


[User] Please transcribe this text

[Assistant] So starter menu, and we want to call it just starters. And we also want to give it a default value in case it doesn't exist. So in this case, just an empty, uh, array. Now in this case, it actually does exist.


[User] Please transcribe this text

[Assistant] So, StarterMenu does exist, and so therefore this default value will not apply, but it should apply to Menu. Because, as I was just saying, there is no property on the Restaurant object called Menu. So, Menu and Starters.


[User] Please transcribe this text

[Assistant] And so here indeed we get the default value, which is the empty array, and here we get the starter menu.


[User] Please transcribe this text

[Assistant] And without this, we would then get undefined, as I was saying. You see? And so this is a nice way of setting a default value.


[User] Please transcribe this text

[Assistant] And once again, keep in mind that this is especially helpful when we do not have our data hard-coded like we have it here. So this is just hard-coded data in our application, but in the real world, we usually get the data from somewhere else.


[User] Please transcribe this text

[Assistant] And then we might not always know how exactly the data looks like. And so then it's useful to set defaults like this.


[User] Please transcribe this text

[Assistant] Next up, we need to talk about mutating variables while destructuring objects. So we did that before with arrays, when we were switching variables. Remember that.


[User] Please transcribe this text

[Assistant] So let's see, uh, down here, you see that we mutated these variables that we created before, but with objects, it works a little bit differently. And so let's write that here, mutating.


[User] Please transcribe this text

[Assistant] Alright, and now we want to destructure this object. And actually let's first, uh, store it into a variable. That makes it a bit easier to work with it. And so now actually let us destructure this array. Now we cannot say const.


[User] Please transcribe this text

[Assistant] Like a, b, because a and b are already declared up here. Right? We can also not do let, because again, that would create new variables, and we already have them there. Okay?


[User] Please transcribe this text

[Assistant] So here we are missing the object that we are destructuring.


[User] Please transcribe this text

[Assistant] As I was saying, we cannot do this. And so, in fact, we want to mutate these variables. So a should become 23 and b should become 7. But now, as we save this, watch what happens.


[User] Please transcribe this text

[Assistant] And so we get a syntax error. And the reason for that is that when we start a line with a curly brace, like this, then JavaScript expects a code block. Alright?


[User] Please transcribe this text

[Assistant] And since we cannot assign anything to a code block, like we did here, with the equal sign, then we get this error, unexpected token, with the equal there.


[User] Please transcribe this text

[Assistant] So to solve this here, the trick is to wrap all of this into parenthesis. And so that's the thing that I wanted to show you here.


[User] Please transcribe this text

[Assistant] So basically we did overwrite these two initial variables, but in order to do it, we had to wrap this destructuring assignment into parentheses. Alright. And now...


[User] Please transcribe this text

[Assistant] We already know how object destructuring works. And so now we need to talk about nested objects, just like we did with nested arrays. So let's say we wanted to create two variables, open and close. And these should contain the open and close hours for Friday.


[User] Please transcribe this text

[Assistant] Okay, so you see that opening hours is an object and then in that object we have another object. So this Friday is an object inside an object which itself is inside the restaurant object. Okay?


[User] Please transcribe this text

[Assistant] Now the opening hours is already an object here that we have already stored in a variable. So that's the object that we're going to destructure. So nested objects.


[User] Please transcribe this text

[Assistant] So again, we're gonna start with opening hours, and now we want to retrieve Saturday. So let's start with doing that.


[User] Please transcribe this text

[Assistant] So just Saturday for now. Or actually, uh, Friday. I think I said Friday.


[User] Please transcribe this text

[Assistant] So let's see. And so indeed, Friday is this object that we get here. But remember that we actually want two variables, one called open and the other one called close.


[User] Please transcribe this text

[Assistant] And this is how that works. So we know that this is an object, and now we can further destructure that object using this syntax.


[User] Please transcribe this text

[Assistant] So the colon, and then again the exact property name of that inner object.


[User] Please transcribe this text

[Assistant] Okay, so that looks confusing, but that's just the syntax that we have to use. So maybe you don't even need to memorize this, but when you need this someday, and you will, then you can just come to this video and see how it works.


[User] Please transcribe this text

[Assistant] And so indeed, now we get our numbers 11 and 23. And we could of course take this even further and even assign different variables to these just like we did up here. So with the colon again. So we could call this one just o and this one just c.


[User] Please transcribe this text

[Assistant] So this is taking it to an extreme.


[User] Please transcribe this text

[Assistant] But as I said in the beginning, destructuring is really powerful. So there's a lot of stuff we can do with it, and that's why I'm showing you all of it right now.


[User] Please transcribe this text

[Assistant] Okay, and now to finish, let me actually show you a really cool practical application of this destructuring. And for that, we're gonna go back to our object here.


[User] Please transcribe this text

[Assistant] So to our example of this section. And now we will create another method.


[User] Please transcribe this text

[Assistant] So many times in JavaScript we have functions with a lot of parameters.


[User] Please transcribe this text

[Assistant] And then it can be hard to know the order of parameters for someone that is using this function. And so instead of defining the parameters manually, we can just pass an object into the function as an argument, and the function will then immediately destructure that object. Let me show you what I mean.


[User] Please transcribe this text

[Assistant] Okay, and so here let's just for now call this argument object. And then I will log that object to the console here. And now let me call this actually. And I will do it right


[User] Please transcribe this text

[Assistant] And now here comes that object of options. So as I said, we can now specify some options here. Let's say the time of delivery. Let's set it to 23.30, which is like 10.30 PM. Let's also say address.


[User] Please transcribe this text

[Assistant] And then we also specify the main index and the start index. So a little bit like we did up here in this function, starter index.


[User] Please transcribe this text

[Assistant] Okay. Oh, and here we need to also give it some value. Let's just say two as well. And so,


[User] Please transcribe this text

[Assistant] Uh, yeaah. Here, right at the beginning, is that object that we just defined. Because here we are simply logging it for now. Okay?


[User] Please transcribe this text

[Assistant] So what we just did was to call this function here and passing in an object of options. And that's a pretty standard thing actually in JavaScript, especially in third party libraries. Because now, here in the function arguments, we can actually do destructuring right away. So we can now say, starter index.


[User] Please transcribe this text

[Assistant] And address, which is exactly the four property names that we have down here. And of course, usually we would first develop the function and then call it. But I wanted to explain you this way of calling a method with an object so that writing the object here then makes sense.


[User] Please transcribe this text

[Assistant] Alright, and so now instead of the object, since we did the structuring right here, we now actually have four variable names. So we can, uh, log them to the console.


[User] Please transcribe this text

[Assistant] Or actually let's do some nice string here. So let's say order received.


[User] Please transcribe this text

[Assistant] And then let's get the foot. So based on the starter index, let's just copy that from here.


[User] Please transcribe this text

[Assistant] So this.starter menu, add the current starter index, and


[User] Please transcribe this text

[Assistant] Then also the main menu. So let's again copy that. Actually all of this from here. And we need to curly brace this.


[User] Please transcribe this text

[Assistant] And so indeed, we get this complete string based on the data that we passed in, in this single object. Okay?


[User] Please transcribe this text

[Assistant] That's important to realize. We only passed in one object into this function. Okay. We did not pass four arguments. It's really just one argument, one object. Then here in the function, as we receive that object, we do immediately destructuring.


[User] Please transcribe this text

[Assistant] And so that's why these names here need to be exactly the names that we have down here in the object.


[User] Please transcribe this text

[Assistant] But what's great about this is that here the properties in the index don't have to match the order in which we do the structuring up here.


[User] Please transcribe this text

[Assistant] And so that makes it really easy for the user of this function, uh, to specify basically the arguments, alright?


[User] Please transcribe this text

[Assistant] So this is great. But we can even use some more knowledge that we gained here.


[User] Please transcribe this text

[Assistant] Which is these default values. So we can now use this to basically set defaults here on some of these. So let's say that the starter index will be one if it cannot be destructured and that the main index will be zero at the time


[User] Please transcribe this text

[Assistant] I can specify the address again. Let's actually copy it from here.


[User] Please transcribe this text

[Assistant] Okay, but then the rest will be taken from the default values that we set here for destructuring.


[User] Please transcribe this text

[Assistant] Alright, and so here as a second string, we get, uh, will be delivered to Via del Sole at 20 hours. Okay?


[User] Please transcribe this text

[Assistant] So in this object that we passed, we do not have any property for the time, right? And so then as JavaScript did destructuring, it here took the default value of 20. Okay. And the same happened for the main index that we also did define.


[User] Please transcribe this text

[Assistant] So it shows zero, and zero is, uh, pizza. And that's why we get pizza here in the output string. Alright.


[User] Please transcribe this text

[Assistant] So, if you ever need to write a function like this, so a really complex one with a lot of parameters that might be then hard to specify, keep this technique in mind. And this becomes even more useful as the amount of parameters increases.


[User] Please transcribe this text

[Assistant] Some people are quite risk-averse and really don't want to take any decisions where there's risk involved at all. Whereas others are fairly risk-tolerant and in some cases even risk-seeking. So they seek out, uhm, decisions that have an aspect of risk to them.


[User] Please transcribe this text

[Assistant] To help develop better assessments of who's likely to take risks versus not.


[User] Please transcribe this text

[Assistant] This is exactly the thing that financial advisors want to assess when you come to them and say, I want to put my money away for retirement. Exactly the aspect of your personality that they want to know is what's your tolerance for taking risks.


[User] Please transcribe this text

[Assistant] And it hurts to say it. You're going home.


[User] Please transcribe this text

[Assistant] You've all got your serious heads on today and we understand why there's a lot at stake. You had four ingredients under that mystery box that Shannon picked, and your challenge was to make a dish that we would pick out of the crowd and choose to taste. Remember, we're only looking for three.


[User] Please transcribe this text

[Assistant] Today you had to reinvent the beef wellington. Bottom three dishes, unfortunately, will put their makers into tomorrow's pressure test. First dish we'd like to taste belongs to Arabs.


[User] Please transcribe this text

[Assistant] You've got one job to do, you three, and that's, you gotta get your culinary and your cooking mojo back, because what you're really gunning for is to win this competition, and it's that close. So buck up, and take the challenge with both hands. Shannon, it's nice that you came and rattled the cage today, so thank you for that, and we'll see you later on in the week. The rest of you, see you tomorrow.


[User] Please transcribe this text

[Assistant] I don't think a sweet beef Wellington is something that's on anybody else's minds. So I'm thinking I might make a sweet version. I'm going left of centre and hoping to stand out to the judges.


[User] Please transcribe this text

[Assistant] I'm going to hold on to my powerpin for as long as possible. I'm going to see how much my puff pastry cooks in the next 12 minutes. I'm just gonna cross my fingers. Oh my god.


[User] Please transcribe this text

[Assistant] So we're going to talk about async-await now. And async-await is a different notation for how we can wait for a single promise and use its value.


[User] Please transcribe this text

[Assistant] First, we can talk about what a synchronous function is. And these arrows represent control flow. They're like, what code is currently running? So, in the first example on the left,


[User] Please transcribe this text

[Assistant] So, the red function's going to run, and then when it's done, we're going to return to where we started in the orange function, just after we called the red function.


[User] Please transcribe this text

[Assistant] The orange function can run again while we wait for something in the red function to finish.


[User] Please transcribe this text

[Assistant] So the main nice part of this is that if there's something very slow in the red function that doesn't require we actually, like, do anything actively, we can just


[User] Please transcribe this text

[Assistant] And that means that we are going to take a really long time to actually handle this user's click. We'll talk more about why that's actually bad, but that's like one of the main motivations for async. We can run handle click at a more response at a time where the website will feel more responsive to the user if we use asynchronous control flow.


[User] Please transcribe this text

[Assistant] One of, uh, whenever either of the promises on top is actually, like, is waiting and can't make progress because it's waiting on something else.


[User] Please transcribe this text

[Assistant] It's going to just wait for the promise to resolve and use the value. It's almost the exact same as .then, and in fact, any use of .then can be turned into aWait, but...


[User] Please transcribe this text

[Assistant] One thing to note is that if a promise is not fulfilled, if it rejects, then


[User] Please transcribe this text

[Assistant] And this is especially noticeable when we have lots of things we're waiting on in sequence. So if we have like four promises that we're trying to wait to complete, and then we're going to use something that, uh, results from all of them, that takes, or that is a lot more code if we use dot then versus if we use wait.


[User] Please transcribe this text

[Assistant] In general, you can use ASIN K08 to rewrite anything you do with Promises. And over time, it's becoming more common than the normal dot then, than the traditional dot then notation.


[User] Please transcribe this text

[Assistant] We're still going to use the .then notation in workshops just because it's probably more familiar to you, but...


[User] Please transcribe this text

[Assistant] An array of story objects. It's not gonna be a promise. So you can think of Await also as kind of unwrapping a promise into whatever is contained in that promise once that promise is fulfilled.


[User] Please transcribe this text

[Assistant] And that's fine inside of a synchronous function. But what we can't do is we can't await an asynchronous function inside of a product, inside of a synchronous function.


[User] Please transcribe this text

[Assistant] That rule's kind of strange, but in short, if you're in a sync function, what you should do is you should write a separate, like, inner function that is asynchronous and then you can just call that function directly.


[User] Please transcribe this text

[Assistant] Okay, if any further questions come up, feel free to use weblab.is slash questions or the help queue or the piazza.


[User] Please transcribe this text

[Assistant] So why do we actually want to use async in general? And I don't mean just like async functions or like the async keywords. I mean...


[User] Please transcribe this text

[Assistant] I mean like promises or asynchronous control flow. We touched on this a little bit when we went over like how control flow works in asynchronous programs, but we'll talk about it more here. So JavaScript has something called the event loop.


[User] Please transcribe this text

[Assistant] So we're going to take that event off of our little queue, and then we are going to run the function that we said we were going to run when that event was like, scheduled.


[User] Please transcribe this text

[Assistant] We are going to attach a function that we want to run when it happens.


[User] Please transcribe this text

[Assistant] Uhm, the reason why we do that is because if we didn't want to do anything when an event happened, there would really be a point in like...


[User] Please transcribe this text

[Assistant] And when a promise says it wants to wait, it's going to add itself to the queue of waiting promises. And then it's going to give control back to the event.


[User] Please transcribe this text

[Assistant] And that means that eventually our promise will run agai-


[User] Please transcribe this text

[Assistant] Also, I think in a real event, we would probably have a rule for the events as well, because, or like, we'd probably run all of the events that are waiting, not just one of them, but that's not super important. The big idea is like,


[User] Please transcribe this text

[Assistant] So why wouldn't we just use synchronous functions all the time with our event loop?


[User] Please transcribe this text

[Assistant] Like the entire time that we're waiting for a request. And it can take like 250 milliseconds, or a second really, for HTTP requests to run, which is a really long time for a user because if you press a button and then the website doesn't respond for a whole second, you'd be pretty annoyed if you had to press a lot of buttons.


[User] Please transcribe this text

[Assistant] The loop is not what is like currently being progressed through. Sometimes we're running actual code that we care about like a promise or like an input or like an input event. And therefore we have these.


[User] Please transcribe this text

[Assistant] It turns out that setState is also asynchronous under the hood. I touched on this earlier with the control flow example and setStories. But setState is specifically asynchronous because we want to be responsive when React is re-rendering our frontend. So we talked about the React lifecycle.


[User] Please transcribe this text

[Assistant] And uhm, like previously. And the React lifecycle goes, uh, like has a rendering phase. That rendering phase can take a while.


[User] Please transcribe this text

[Assistant] That'd also be pretty convenient as a user, because it means that whenever you input something, you'd have to wait a while for the rerender to happen before you can input something again. So for that reason,


[User] Please transcribe this text

[Assistant] Well, why couldn't we just group all the changes together? Like group a lot of changes together so we only do one re-render for every like 100 changes. Or once per second.


[User] Please transcribe this text

[Assistant] And when setState is asynchronous, that, well, we get that responsiveness because when we're doing a render, there's also some waiting.


[User] Please transcribe this text

[Assistant] And while we're waiting for the render to actually like complete, we get to respond to user inputs and button presses and that sort of thing, so the user doesn't actually have to notice that there's a re-render going on.


[User] Please transcribe this text

[Assistant] So now we're going to go through some examples of when async is a good idea to use. And for the most part, we already can use async for all of these things. And it's like pretty much the default. So when we're communicating between different devices.


[User] Please transcribe this text

[Assistant] And, uh, well then, like, synchronously, then we'd be stuck waiting for a possibly very long time without being able to, like, present, like, re-render the webpage, or...


[User] Please transcribe this text

[Assistant] To respond to any input from the user. So the website would be very unresponsive.


[User] Please transcribe this text

[Assistant] And that could take a while if there are a lot of new posts. So, Facebook can fetch those pages asynchronously, and then, or fetch those posts asynchronously, and with those posts, it can eventually publish them, and you'll see them on your screen with like, when it re-renders eventually.


[User] Please transcribe this text

[Assistant] We'd actually just be unable to press the pause button, like it wouldn't do anything. So we need some, so because that, and that happens because when you're playing something on YouTube, you're downloading the video. So if like while downloading a video, you were stuck waiting for that to complete before you could do anything else, YouTube would be very unresponsive and pretty much unusable.


[User] Please transcribe this text

[Assistant] And lastly, if you're running some slow computation on a server, well, then you also care about using async because, uh,


[User] Please transcribe this text

[Assistant] If you, if you had to wait for the whole computation to run, like, let's say it took several seconds, your website is again blocked from interacting with the user, which we also don't want.


[User] Please transcribe this text

[Assistant] And there are a lot more uses cases like this, where you're waiting on something else to happen and you don't want the website, and you want the website to stay responsive.


[User] Please transcribe this text

[Assistant] And you can think of it as sort of like unwrapping a promise into the inner value, although keep in mind that it throws an exception when it, when like the promise rejects.


[User] Please transcribe this text

[Assistant] We use async when we don't know how long something is going to take. For example, for react rendering, talking between the client and the server or the server and the database. And for in general background tasks that we need to, where we need to like preserve something being responsive, but we also care about this other operation happening so that we don't have to wait for it in the future.


[User] Please transcribe this text

[Assistant] I sense some general confusion in the room. I'm not sure if that's accurate, but just in case people around you are stuck, can you take like


[User] Please transcribe this text

[Assistant] This final speaker is speaking about an issue. We brought her here today because we believe that the issue she works on is going to be one of the biggest issues of the 2010. It's going to be the issue that we look back on in 70 years and say, I cannot believe that they didn't solve it until then.


[User] Please transcribe this text

[Assistant] And uhm, she runs the Prison Studies Project. Where she teaches a, at PrisonStudiesProject.org, you can check it out. She teaches a Harvard Sociology Junior Tutorial inside Norfolk and Framingham State Prisons.


[User] Please transcribe this text

[Assistant] Inside there with Harvard students, BU students, and, and, uh, people who are incarcerated. Uh, she's, uh, taught courses in a number of prisons, including Sing Sing. Her final talk tonight for Harvard Thinks Big is a truly big thought. Act big, dare to see. Dr. Keister.


[User] Please transcribe this text

[Assistant] Well, it's pretty good, I think. I brush twice a day and change my brush every couple of months.


[User] Please transcribe this text

[Assistant] Nothing fancy, just a regular cheap plastic one.


[User] Please transcribe this text

[Assistant] Oh dear, and I thought I was actually quite environmentally aware. But that's quite shocking. I hadn't thought of that.


[User] Please transcribe this text

[Assistant] She talks about yogurt, cereal, pasta and rice.


[User] Please transcribe this text

[Assistant] She was saying that she buys the biggest containers for those that she can. And not just food, things like shampoo as well.


[User] Please transcribe this text

[Assistant] Well she says that her pet peeve is small packs of things. A pet peeve is something that you find particularly annoying. She doesn't like small packs because they use a lot of packaging for a small amount of product.


[User] Please transcribe this text

[Assistant] Yes, she talked about the hand-me-down culture. When I was growing up, I had a lot of hand-me-downs. These were toys and clothes from my older cousins, which saved us a lot of money, and they were then passed on to someone else.


[User] Please transcribe this text

[Assistant] Dr. Shine used an interesting expression for that, didn't she? She said most of these things are in good nick. That expression means in good condition.


[User] Please transcribe this text

[Assistant] Yes, a pet peeve is something that someone finds particularly annoying.


[User] Please transcribe this text

[Assistant] And if you have a lot of something, you can decant it to smaller containers. That is, you can transfer it to those other containers to make it easier to use. For example, I buy huge bottles of liquid soap


[User] Please transcribe this text

[Assistant] And decant it into smaller dispensers for the kitchen and bathrooms.


[User] Please transcribe this text

[Assistant] But of course you'd only want to pass on things in good nick. That is, in good condition.


[User] Please transcribe this text

[Assistant] Well, the same really. I wouldn't mind being slightly taller, I suppose, which is appropriate as today's topic is about heightism.


[User] Please transcribe this text

[Assistant] But before we find out more about this topic, our quiz question for today. The tallest person ever proven to live was Robert Wadlow from the USA. But how tall was he?


[User] Please transcribe this text

[Assistant] Well, listen out for the answer at the end of the programme.


[User] Please transcribe this text

[Assistant] Tanya S. Ossensky is an attorney and author of the book Short Changed about her own experiences of heightism.


[User] Please transcribe this text

[Assistant] Tanya spoke about her book on the BBC radio programme Thinking Allowed. She talked first about our general feelings about height – what does she say people never wish for?


[User] Please transcribe this text

[Assistant] And that's right, she said that tall people relish their height. This means they enjoy being tall, they get great satisfaction from it.


[User] Please transcribe this text

[Assistant] She goes on to explain how some research has shown shorter people are less likely to get jobs, less likely to get promoted and less likely to earn as much as taller people.


[User] Please transcribe this text

[Assistant] What is the financial difference, she mentions? She talks about the premium per inch. An inch is about 2.5 centimetres and the premium is a word which means the extra benefit, the extra advantage. Here's Tanya S Osensky again.


[User] Please transcribe this text

[Assistant] For women it's a bit less but still significant at $1000 an inch.


[User] Please transcribe this text

[Assistant] Well, one person who certainly wasn't short was the subject of today's quiz question, the tallest person who has lived, Robert Wadlow. We asked how tall he was. Was it a, 2 metres 71 centimetres, b, 2 metres 72 centimetres, or c, 2 metres 73 centimetres? What did you say, Catherine?


[User] Please transcribe this text

[Assistant] Well, you were almost there. The correct answer was B, 2 metres 72. Congratulations if you got that right. Now Catherine, much as I relish being in the studio with you, we must wrap up the programme now with a review of today's vocabulary.


[User] Please transcribe this text

[Assistant] You're welcome. This programme was about a kind of discrimination. This means the unfair or unequal treatment of people because of, for example, their race, religion, colour, age or indeed height.


[User] Please transcribe this text

[Assistant] Something which many of us do is embellish our height. We say we are taller than we actually are.


[User] Please transcribe this text

[Assistant] And that is 6 Minute English for today. Do join us again and until then we look forward to seeing you in all the usual places – Instagram, Facebook, Twitter, YouTube, as well as our website bbclearningenglish.com. Goodbye! Bye!


[User] Please transcribe this text

[Assistant] I've never tried those things. Come on, Lou, I'm starving.


[User] Please transcribe this text

[Assistant] That's great! Wow! Congrats! You two are great together, you know. You have such a beautiful family. I hope that one day I can have that.


[User] Please transcribe this text

[Assistant] What are you talking about? I hardly knew her. How could she be in love with me? I can go through with it even though she is a great woman. No, I left my heart in the United States. I just hope Veronica is happy.


[User] Please transcribe this text

[Assistant] Veronica? How did you get here? How do you know where I live? I waited for you at the airport, but you never showed.


[User] Please transcribe this text

[Assistant] How are you? How was your trip? It was fine. I've been better, but it's great to be home. I've missed you all. How's mom? She's great.


[User] Please transcribe this text

[Assistant] That's great! Wow! Congrats! You two are great together, you know. You have such a beautiful family. I hope that one day I can have that.


[User] Please transcribe this text

[Assistant] What are you talking about? I hardly knew her. How could she be in love with me? I can go through with it even though she's a great woman. No, I left my heart in the United States. I just hope Veronica is happy.


[User] Please transcribe this text

[Assistant] Veronica? How did you get here? How do you know where I live? I waited for you at the airport, but you never showed.


[User] Please transcribe this text

[Assistant] This episode is brought to you by the song Like This, Patrick Olson's new release single. You can check out the link in the description to start listening.


[User] Please transcribe this text

[Assistant] Imagine taking a nap at a time when woolly mammoths roamed the plains and then waking up in the 21st century. That may sound like a science fiction story, but it might be the real experience of tiny aquatic animals called rotifers. According to a report in Current Biology, these little creatures can survive being frozen in ice


[User] Please transcribe this text

[Assistant] Continuing to live their tiny lives. But maybe ten years is nothing for a frozen rotifer. Researchers found these Ripvan rotifers in a sample of frozen soil, or permafrost, from northeastern Siberia. The soil sample came from three and a half meters underground, and radiocarbon dating estimated it to be around 24,000 years old. Like, imagine sleeping so long you have to be radiocarbon-dated when you wake up. When the researchers thawed the soil,


[User] Please transcribe this text

[Assistant] They found living rotifers inside. Now, it's possible for something as small as a rotifer to have, like, maybe snuck into the soil after it originally froze, or even during the sample collection. But the scientists claim that this is not the case here. First, because the icy soil is solid enough,


[User] Please transcribe this text

[Assistant] Like, they're probably distinct from the rotifers wiggling around today. And they were also able to run a series of experiments, refreezing the cloned rotifers and showing that they are


[User] Please transcribe this text

[Assistant] That rotifers and other organisms can survive being frozen for long periods of time.


[User] Please transcribe this text

[Assistant] Possibly very long periods. Scientists are hopeful that studying these organisms might help us develop better techniques for storing frozen tissues and organs. So if you're clinging to the sci-fi dream of freezing yourself for thousands of years into the future,


[User] Please transcribe this text

[Assistant] The secret to success might be held within these tiny invertebrates. And if these rotifers really were frozen for 24,000 years, they totally slept through a major historical event.


[User] Please transcribe this text

[Assistant] It's a little bit clearer. A new study in the journal PNAS reports ancient goat DNA from a time when they were just beginning their path


[User] Please transcribe this text

[Assistant] The DNA samples come from the remains of goats in two archaeological sites in the Zagros Mountains of Western Iran, dating to about 10,000 years ago. Researchers were able to sequence DNA from 32 goats at these sites. To date,


[User] Please transcribe this text

[Assistant] These are the oldest livestock genomes ever sequenced. The results show a group of animals that were not fully wild, but weren't fully domesticated yet either. The physical remains of these goats look a lot like their wild cousins, with large bodies and big, scimitar-shaped horns. And their DNA is lacking in some of the genetic signs associated with domestication.


[User] Please transcribe this text

[Assistant] But they were clearly on the way. The analysis found that most of these ancient goats represent an early branch of the domestic goat lineage. Amazingly, these goats' DNA held clues to how humans were managing them.


[User] Please transcribe this text

[Assistant] So it seems that humans of the time were still in the habit of capturing wild goats to add to their herds. But on the other hand, the Y chromosomes of these goats, which are passed down by males,


[User] Please transcribe this text

[Assistant] And also hilarious internet videos. But in addition to hilarious videos, the internet also has music. And today's sponsor, Music for Scientists by Patrick Olson, has a bunch of songs you can choose from.


[User] Please transcribe this text

[Assistant] Such as the new single, Like This. This is a fun, catchy single that focuses on our place on Earth. It's a total banger. It's all about seeing very familiar things in new ways. If you want to check this new single out, check out the link in the description to start streaming Like This by Patrick Olson.


[User] Please transcribe this text

[Assistant] Today we're going to be doing our final workshop in the main lecture series, Workshop 10, uh, called Gamebook. And today with Kenneth, I'll be working through


[User] Please transcribe this text

[Assistant] Kind of an end-to-end process of adding a game feature to this chatbook or this catbook website we've been working on so far.


[User] Please transcribe this text

[Assistant] There's many different types of games, and I'm sure everyone is like familiar with at least one of these games, whether it be Minecraft, Among Us, League of Legends, or, you know, many other types of games.


[User] Please transcribe this text

[Assistant] And when you first think of like all these different applications or games that exist, they may seem very different than the types of things we've been working on so far in Catbook and web dev in general.


[User] Please transcribe this text

[Assistant] But as you'll kind of see today, lots of the topics and concepts that we've learned over the course of the past two weeks can actually be extended and built out to create some of these amazing games.


[User] Please transcribe this text

[Assistant] But just first to kind of like, describe what is a little bit different about a game than a normal website that makes it initially challenging at first.


[User] Please transcribe this text

[Assistant] The first is that there's complicated game logic and state associated with every game.


[User] Please transcribe this text

[Assistant] Uhm, for example, things like how many players are in the game, whether or not someone is winning the game, scores, stuff like that. This all will need to be stored and coordinated between all the players of the game.


[User] Please transcribe this text

[Assistant] To be able to feel like they can actually move the way they want or interact with the game the way they want rather than having like super long delays between their inputs and the consequences of those inputs.


[User] Please transcribe this text

[Assistant] As I mentioned, we'll actually be able to extend a lot of the infrastructure we've been working on over the past few weeks to build out this game page. And again, just to go over what we've learned so far, we have users or clients that communicate with a backend server.


[User] Please transcribe this text

[Assistant] That backend server can help us with things like authentication, and it can also talk to backend databases, which will be able to store lots of information that we'll want to be using in our game.


[User] Please transcribe this text

[Assistant] We'll introduce a few new concepts. The first is the one I was alluding to before, which is the game state and the game logic.


[User] Please transcribe this text

[Assistant] Have the clients update that game state, uhm, and make sure that they all agree on the same game state to display to the users.


[User] Please transcribe this text

[Assistant] The next thing that we're introducing is a new component called the HTML canvas and kind of exploring what exactly this is. An HTML canvas is essentially a specialized HTML component that allows us to draw images and shapes on them.


[User] Please transcribe this text

[Assistant] The reason this is helpful for us is because, as you can see on the slide, if we draw an image that's slightly different, uh, very fast, we can kind of create this illusion of motion. Uh, so this is called animation.


[User] Please transcribe this text

[Assistant] And we'll be using this technique to kind of animate our game. As you'll see, we'll be able to have players moving around the screen and more.


[User] Please transcribe this text

[Assistant] It's worth noting that this HTML canvas actually uses a slightly inverted coordinate system with y going downwards. So when we're working with this element, uhm, just be sure to keep that in mind if we see any unexpected behavior.


[User] Please transcribe this text

[Assistant] So let's just get into what we're actually going to be building out today. We're going to be building a very simple version of the Iagario game. And if you navigate to weblab.is slash example and click on the game tab,


[User] Please transcribe this text

[Assistant] You should be able to play the end product we'll be working towards over the course of this lecture.


[User] Please transcribe this text

[Assistant] And here's a example gif of kind of what this game looks like.


[User] Please transcribe this text

[Assistant] As you can see, you can move around and eat food. And as you eat food, your character should increase in size.


[User] Please transcribe this text

[Assistant] So I just wanted to take a brief moment here to pause in case there's any questions on like the high level overview of what we're going to do today.


[User] Please transcribe this text

[Assistant] As I mentioned so far, we can reuse lots of the concepts we've learned in the past few weeks, beginning with the React Component Tree.


[User] Please transcribe this text

[Assistant] We're going to be adding a new page, so a new component that will house our game that we're creating. And we'll kind of introduce some new features to.


[User] Please transcribe this text

[Assistant] We have things like the login that we saw in workshop 8.


[User] Please transcribe this text

[Assistant] We have the client socket and the server socket files, which handle some client commu- or socket communication between the server and the client. And we'll be introducing some new files we worked with today. For example, the game.


[User] Please transcribe this text

[Assistant] The component that I just mentioned that will display the game on our websites.


[User] Please transcribe this text

[Assistant] We'll create an input file that will allow us to read inputs from the user.


[User] Please transcribe this text

[Assistant] We'll have a canvas manager component which will manage that HTML canvas component I was mentioning that will be able to allow us to animate motion in the game.


[User] Please transcribe this text

[Assistant] And on the server side, we'll introduce a few new files, starting with game logic, which will house all of the logic of our game. So this includes things like the game states and as well as, um, like whether or not there's winners, et cetera.


[User] Please transcribe this text

[Assistant] This will call a function in ClientSocket that will emit a socket event to be caught by the server in ServerSocket.


[User] Please transcribe this text

[Assistant] Once the server hears that event, they'll call a function in game logic to update the game state.


[User] Please transcribe this text

[Assistant] Once that game update happens, we'll have to send all the updates that happen back to the client. So this will happen from GameLogic to ServerSocket where an event omission will take place.


[User] Please transcribe this text

[Assistant] The client socket will catch that event and execute a callback function that will update the game components.


[User] Please transcribe this text

[Assistant] Which will pass that information down to Canvas Manager to update what we should animate on the screen.


[User] Please transcribe this text

[Assistant] One thing to note here is that we'll also be using some API endpoints to communicate between the client and the server as well. And kind of we'll see when we should use sockets and when we should use APIs a bit later in the workshop.


[User] Please transcribe this text

[Assistant] This is just that same information flow I was talking about. So again, input will cause the client's stock animation to be called by the server and update the game logic.


[User] Please transcribe this text

[Assistant] Then the game logic will send that update back to the client via this socket connection to be updated from the screen.


[User] Please transcribe this text

[Assistant] Uhm, and specifically for like this game, we're building the size, location of foods, and whether or not there's a winner. And all of these things, uhm,


[User] Please transcribe this text

[Assistant] As I was mentioning, there are these two ways of communication. And this will become kind of more clear why we use one versus the other in the later steps of the workshop.


[User] Please transcribe this text

[Assistant] But just as a high level overview, generally when we want fast communication, we'll be using sockets. And when there's something that's like slower and not super important to execute immediately, we'll be using API calls.


[User] Please transcribe this text

[Assistant] Uh, there's this JavaScript function that you can call an array that's very similar to .map. It's called .forEach.


[User] Please transcribe this text

[Assistant] Uhm, essentially what this will do is it will execute callback function for every element of that JavaScript array.


[User] Please transcribe this text

[Assistant] Uhm, it's very similar to math in that regard. The only difference is that it will actually mutate the array at the end.


[User] Please transcribe this text

[Assistant] But in general, this is like a very useful function whenever we want to apply a callback function to every element of an array. And we'll see like when we're, when we're like expected to use this in our workshop.


[User] Please transcribe this text

[Assistant] We do think it's okay if you actually don't follow all the steps live and just kind of like look at what we're coding and try to understand like the reasoning behind it. If you do wish to follow along feel free, but just note that it will go pretty fast.


[User] Please transcribe this text

[Assistant] And what we recommend is like, if you want to dive into the workshop further, uh, for example, if you're creating a game for your website, like definitely go back and watch the recording and then like try to follow step by step at that point.


[User] Please transcribe this text

[Assistant] So let's just get started. Uhm, to make sure we're up to date, we can get reset hard as we've been doing. And we can check out W10.


[User] Please transcribe this text

[Assistant] Okay, so as with any like page that we've been building in catbook,


[User] Please transcribe this text

[Assistant] Uh, place to navigate in the nav bar, that will bring us to this new page.


[User] Please transcribe this text

[Assistant] And what we'll do is we'll first input that game, er, import the game components.


[User] Please transcribe this text

[Assistant] And we'll want to add it to our router as we saw before so that we can actually navigate to this page.


[User] Please transcribe this text

[Assistant] Uh, we'll pass it a user ID as a prop.


[User] Please transcribe this text

[Assistant] The next step is to just add it to our navbar component so that we can click on it and it will be redirected to that page. So in navbar.js, uh, if we look at line 31,


[User] Please transcribe this text

[Assistant] Uh, you can see like this is kind of where we add all those links to all the pages, so we'll just add a new link here.


[User] Please transcribe this text

[Assistant] And this will use the syntax very similar to the other links that already exist. But instead of navigating to something like chat, we'll navigate to slash game. And we will call this, uh, we'll display like the text game in the snap bar.


[User] Please transcribe this text

[Assistant] So again, what we've done is just simply add this game page to our router and also to our nav bar. And we should see that if we navigate to our localhost 5050.


[User] Please transcribe this text

[Assistant] We should see that there's this new tab here called Game. And when we click on it, we will be redirected to like this empty page.


[User] Please transcribe this text

[Assistant] So this is very similar to what we've been seeing when we added both the chat components and the profile components. This is essentially just the blank react page components.


[User] Please transcribe this text

[Assistant] So that's all good, the next step is to actually start populating out this page.


[User] Please transcribe this text

[Assistant] And we'll do that in step one, so we can get...


[User] Please transcribe this text

[Assistant] That will be like, working with the rest of the steps to update the game and display the game. Uhm.


[User] Please transcribe this text

[Assistant] This is what will, like, the step will look like at the end of the day, where we have this canvas displayed, and we'll be able to draw, like, players on, on this canvas.


[User] Please transcribe this text

[Assistant] Okay, so breaking down step one, uhm, as I mentioned before, we will set up a lot of like the preliminary functions to control our game and interact with our game here.


[User] Please transcribe this text

[Assistant] We'll see there's some, uhm, steps that we've annotated that we want to do.


[User] Please transcribe this text

[Assistant] So the first thing we want to do is to actually create a variable that will house all of our game states. And we'll call this gameState.


[User] Please transcribe this text

[Assistant] And this will be an object that has two parameters. The first is whether or not there's a winner. Uhm, it'll set that to be null because I guess when the game starts, there's no winner.


[User] Please transcribe this text

[Assistant] And the second field of this object will be a...


[User] Please transcribe this text

[Assistant] Have in the game and we'll kind of like fill this out later. So we'll see what property each player has in a bit.


[User] Please transcribe this text

[Assistant] The next thing we'll want to do is a little bit lower.


[User] Please transcribe this text

[Assistant] And for now, we'll leave this blank, but in the future steps, we'll be filling out this function to actually update game state as accordingly. So this could be like eating food, eating other players and stuff like that.


[User] Please transcribe this text

[Assistant] We want to export both of those things, so that's the game state, as well as the update game state function.


[User] Please transcribe this text

[Assistant] So that we're able to access these two things in other files.


[User] Please transcribe this text

[Assistant] One of those files we need to access these things in is server sockets. So if we navigate to serversocket.js.


[User] Please transcribe this text

[Assistant] We'll see here, our first step is to create a function which will actually send that game state we just defined to all of the clients that are connected.


[User] Please transcribe this text

[Assistant] Since we kind of want like game state updates to be pretty fast, we'll be using sockets for this. So let's create a function that emits a socket event. And we'll call this send game state.


[User] Please transcribe this text

[Assistant] Well, since we're, this is like somewhat confusing, so sorry about that in advance, but like...


[User] Please transcribe this text

[Assistant] And what we did was we named this event, in this case we'll call it update, uh, because it's a game state update.


[User] Please transcribe this text

[Assistant] And we also passed some information along with it. In this case, we'll want to be passing the entire game state.


[User] Please transcribe this text

[Assistant] So we'll access that game state we just defined in game logic with kind of the syntax here.


[User] Please transcribe this text

[Assistant] The reason why we can do this, again, is because we exported that game state before in this file. And then we imported it, uhm, up here. As game logic.


[User] Please transcribe this text

[Assistant] This socket manager wrapper is actually just the service socket file. So there's already some, like, this get.io thing.


[User] Please transcribe this text

[Assistant] The thing that's returned by that function is just this IO object, so we can just access it directly here.


[User] Please transcribe this text

[Assistant] So below that we'll see, we want to now create a function that will start our game. And I'll just type it out, uh, before kind of going into what exactly that means, but this will look like something start running game. This itself will be a function.


[User] Please transcribe this text

[Assistant] And what we want to do is we'll want to call this updateGameState function we just defined, which remember is like blank for now, but we'll be filling those out in future steps. So eventually this will actually update the state of our game.


[User] Please transcribe this text

[Assistant] And we'll want to call that sendGameState function we just created up here, which will emit a socket event to all connected players.


[User] Please transcribe this text

[Assistant] Secondarily, this set interval function takes in an argument, which is a number.


[User] Please transcribe this text

[Assistant] The setInterval function will take in a callback function and a time interval.


[User] Please transcribe this text

[Assistant] And every time interval in milliseconds, it will execute the callback function. So essentially what I'm saying here is like every 60 times a second,


[User] Please transcribe this text

[Assistant] We will execute this callback function and what this callback function will do is it will update the game state and then send that updated game state to all the clients via this socket.


[User] Please transcribe this text

[Assistant] The last step we'll need to take in this is to actually like call this function to start running the game. So we can just do that here.


[User] Please transcribe this text

[Assistant] So our next step would be to also fill out some functions to help with our game logic. So this would be things like spawn player,


[User] Please transcribe this text

[Assistant] Uhm, which can be found again in this game logic.js file.


[User] Please transcribe this text

[Assistant] Like, within this spawn player function, what we want to do is initialize a new player, uhm, with some properties like position, radius, etc.


[User] Please transcribe this text

[Assistant] And what we're going to do is we're simply going to add that player to that GameState object we created before. So remember, we had this, uh,


[User] Please transcribe this text

[Assistant] This, this variable up here called gameStates and has this field called players. So we're going to want to add a player to that field, which we can do with this syntax.


[User] Please transcribe this text

[Assistant] So this will add a player with ID to this player object up here.


[User] Please transcribe this text

[Assistant] And we're going to map it to some properties that belong to the player.


[User] Please transcribe this text

[Assistant] So as mentioned up here, there's a few different things. There is the position, which will set to initial random position.


[User] Please transcribe this text

[Assistant] Uhm, and we can actually get at this with this utility function that we've already written for you called getRandomPosition.


[User] Please transcribe this text

[Assistant] And we've defined what the initial radius for all players should be, just in this global constant, uhm, up here.


[User] Please transcribe this text

[Assistant] Which is the color of the player, uhm, to draw.


[User] Please transcribe this text

[Assistant] And if you look up here, we defined an array of


[User] Please transcribe this text

[Assistant] And what we can actually do is we can select a random color from that array.


[User] Please transcribe this text

[Assistant] So what we're going to do is, again, access this colors array, we'll index it with this syntax as per normal.


[User] Please transcribe this text

[Assistant] And the index we're going to pass in is something that looks like this.


[User] Please transcribe this text

[Assistant] And it's not super important to like understand everything that's happening here, but essentially what's happening is I'm going to select a random integer, uh, with from zero to the length of the array. And.


[User] Please transcribe this text

[Assistant] Essentially what that has the effect of is selecting a random color that's defined in this array.


[User] Please transcribe this text

[Assistant] So similarly, we'll also need a function to remove players from the game, for example, when they disconnect, or perhaps when they're eaten. So we can see that in...


[User] Please transcribe this text

[Assistant] Line 55, we have, or 54, we have this function called removePlayer.


[User] Please transcribe this text

[Assistant] And essentially all we need to do is remove the player we want to delete from this game state object, uh, players. And we can do this with this keyword called delete.


[User] Please transcribe this text

[Assistant] I'm actually not sure if we've seen this in JavaScript before, but essentially, if you're familiar with like the Python delete, it works very similarly.


[User] Please transcribe this text

[Assistant] Where essentially it will just delete a entry in like a particular object. So if I write this.


[User] Please transcribe this text

[Assistant] And again, that will effectively remove it from the game state and thus remove it from the game.


[User] Please transcribe this text

[Assistant] Okay, so now that we've defined these helpful functions, our next step is to actually, like, utilize these functions when we want to perform these particular tasks. So either spawning the player or removing the player.


[User] Please transcribe this text

[Assistant] You'll see that there's this socket function called addUser and you'll recognize this function.


[User] Please transcribe this text

[Assistant] From Workshop 9, when we define that in its socket endpoint.


[User] Please transcribe this text

[Assistant] So we'll just add one more thing here, whenever we associate a new user with a socket, we're also going to want to add this at the beginning. And we can do that by calling that function we just wrote.


[User] Please transcribe this text

[Assistant] And we'll pass in, uh, the ID of the player as this function expects.


[User] Please transcribe this text

[Assistant] Okay, so we've set up a lot of the backend infrastructure now to like spawn new players in and send game states to the client. The next step is to actually instruct the client to listen for those game states. So again, these game state socket updates.


[User] Please transcribe this text

[Assistant] And then teach the client how to display the apron on their page. So the next few steps we'll be working with react on the front end.


[User] Please transcribe this text

[Assistant] This is in the diagram, game and canvas manager we're looking at. So in game.js.


[User] Please transcribe this text

[Assistant] If we look at line 17, we'll see this function process update.


[User] Please transcribe this text

[Assistant] And this will be the function that we'll use to essentially what it says, process game state updates from the server.


[User] Please transcribe this text

[Assistant] We'll use this function called drawCanvas.


[User] Please transcribe this text

[Assistant] And it will take in the update that's set along with the stock emission.


[User] Please transcribe this text

[Assistant] And it will also take that canvas ref I was mentioning before. And again, this is essentially just a way for React to know that we want to draw on the particular canvas that's instantiated on the page.


[User] Please transcribe this text

[Assistant] The next thing I want to do is to actually call this process update event whenever we hear that socket event we were talking about before. So.


[User] Please transcribe this text

[Assistant] And recall that, like, the event that we're listening for is called Update. We defined this event to be called Update, so we'll have to listen for that same Update event on the client.


[User] Please transcribe this text

[Assistant] What we're going to do when we hear that event is we're going to call like this process update function we just defined here, which ideally will draw a canvas for us.


[User] Please transcribe this text

[Assistant] Cool, so the next step is to actually like, define what this draw canvas means. And to do that, we'll look at canvas manager.