The President of the United States, and Tim Timken. Now that's what I call a can't and welcome, Mr. President. I guess everybody in here already has that spirit and knows that the United States is a very, very big place with over 236 million people. And there is only one President. Today we are indeed fortunate, honored and happy that he is able to be with us here in Canton at our Timken Faircrest Steel Plant. Andy is standing here together with us in this enormous factory of the future which means so much to our company, our job security, and our will to win the contest with our competitors throughout the world. Mr. President, the Canton area is renowned for a winning tradition in sports, which I know you know a lot about. And I want you to know that all these people you see before you here are also real winners. When it comes to making steel, when it comes to making bearings, and when it comes to this kind of construction, they are real winners. And as all football players seem to say these days, we're number one and we intend to stay there here in Canton, know the story behind making this plant a success. It has been a study in cooperation. The entire community has supported us. Here today I would like to say welcome and thank you. Ladies and gentlemen, the President of the United States. Thank you. Thank you very much. Thank you very much. Congressman Regula, State Representative Dave Johnson who's here and all of you ladies and gentlemen. Tim Timpkin, it's plain to see that you're following in the proud tradition of one of America's great men of commerce and industry, your great-grandfather Henry Timpkin. You know, being here in this particular place and it's true from some football and I played myself and then I became a sports announcer longer ago than I'm going to admit to. All the way over here I found myself telling Jim Thorpe stories and so forth with regard to that football hall of fame. But it is a thrill for me to see what's happening here. I can now say with confidence I've seen the future and the future looks very good indeed. I'd just like to congratulate Tom Faut and his crew from the Drevaux Corporation, the subcontractors on this project, all of the skilled craftsmen. From when I see you're doing a quality job of which you can all be rightfully proud. With your energy and enthusiasm, with your dedication to efficiency and excellence, America is not just going to meet the competition, we're going to beat the competition. Timpkin's courageous $500 million investment representing about two-thirds of the total value of the company is in the finest tradition of America's entrepreneurial spirit. The cooperation between everyone concerned, management, labor, federal state and local government is part of a new spirit that is emerging throughout this country. We're leaving the pessimists and the doom and gloomers behind. The old ideas that spawned inflation, stagnation and national self-doubt only a few years ago have given way to a new philosophy. Americans are rejecting the policies of something for nothing, rejecting politicians who try to divide us by exploiting envy and who offer programs with the claim we'll tax somebody else to pay for it. You know that term about robbing Peter to pay Paul. It was some time ago that we began to realize under their policy of robbing Peter to pay Paul, we were all named Peter, there weren't any Pauls left around. But the American people anymore don't buy something for nothing schemes. We know that raising taxes, no matter what the big spenders say or try to make us believe will mean a heavier burden for the working people of this country. Let me ask what you think would be better for the future of America. Is it better to let them tax away your earnings because they'll know how to spend your pay better than you do? Or isn't it better for you to have more take-home pay and decide for yourself how that money will be spent? Well, I think it's better too. And I think it's better too to have Timkin and other companies like yours channeling their resources into job-creating investment rather than letting politicians tax it away. America doesn't need higher taxes and a heavier tax burden. America needs more high-tech to modernize heavy industry. We need more take-home pay, more investment, more in ovation and more jobs. My opponent made raising taxes his number one issue and the option that he would use first in solving our country's problems. My first option is expanding economic growth and increasing opportunity. I say let's not focus on dividing the pie and everybody continually getting a smaller and smaller piece. Let's pull together and make a bigger pie so that everybody can have a bigger piece. Standing here today and seeing this incredible new mill taking shape, I can't help but think of a telegram I received back in 1981 and I would have read it to you except that Tim Timkin has already done so. No, that's alright. And I was very pleased to get it and very pleased to have him remember too about that telegram. I've often wondered what kind of telegram I might have received had our policy been to increase taxes instead of reducing them. This company didn't start out making steel. In fact, back in the 1890s, Timkin was primarily a supplier to wagon and carriage builders. Mind you, I didn't see that for myself. I just heard about it. And Timkin has always been a vibrant and innovative company never afraid of new challenges, never afraid to take advantage of new opportunities and never afraid to compete. If America is to progress as a country, this is the kind of spirit our policies must promote. There are those who call for protectionism and quotas which are short-sighted and temporary at best and which will make all of us a lot worse off in the long run. Certainly we must ensure that other countries, our competitors, do not use unfair trade practices. I reaffirmed our determination to prevent this and charted a clear course of action to that effect last week. But a blunder-bus approach of quotas and trade barriers encouraging stagnation by stifling competition is not the way to a better future.  America's heavy industries, like steel, will be just as much a part of our country's future as they are a part of our country's past. We're going to ensure this by hitting directly any country that attempts to dump its industrial products using unfair and illegal subsidies. But aggressive enforcement is only part of the answer. The kind of innovation that we underline here today at Timkin is the most important part of the solution. This mill is designed to produce the highest quality alloy steel at the lowest cost. While your workers in this mill will be paid comparable wages to any in the industry, their productivity will be substantially higher. It'll be energy efficient using 22% less electricity, 27% less natural gas per ton of steel melted. It was designed to meet and in many cases exceed all of the EPA's clean air standards. It innovatively ties, as Tim Timkin rightly points out, high tech and heavy industry. And this type of commitment, commitment in the part of all of us, is the path to progress and an improved standard of living. I firmly believe that if given the tools and the equipment we need, American workers can out-produce, out-sell, and out-compete the pants off anyone in the world. What you accomplish here will reap rewards throughout the system. Producing a higher quality product at a lower cost will help the auto and other heavy industries meet their competition, benefit your other customers, and eventually in one way or another, everyone in this country will benefit. And that's what made America the great country it is. And that's what's going to make America even greater steel. There's been a lot said recently, it was the lead story in a major magazine recently, about the new spirit spreading across America. It's something I've been calling the new patriotism. I couldn't help thinking about it when I was driving over here and we went past that football hall of fame. Several years ago, there were those, even some of our own leaders, who seemed to be counting America out. Well, we aren't a nation of quitters. We're all on the same team, the American team, and it's good to see we're scoring touchdowns again. And that's the way we are and nobody should ever sell America short. In the dark days of World War II, Timken quickly adjusted its production line from steel tubes to gun barrels. At the end of the war, you did what the enemies of freedom thought was impossible, producing over 100,000 gun barrels used for anti-aircraft guns, tanks, and the nose guns on the B-25 bomber. 6,000 Timken employees marched off to fight for their country during that conflict. One of them was John Paul Moriarty. He was blinded when he was shot down over enemy territory in 1944. He suffered blindness and imprisonment. And when he finally got home, the city of Canton gave him a hero's welcome. His friends and neighbors pooled their money and provided this local boy who gave his sight so they could remain free, enough money to build a home for his family. And then in March of 1946, John Paul Moriarty returned to the Timken Company. He was given a job operating special electronic gauges that had been specifically developed to enable the blind to inspect Timken bearings. John Paul Moriarty retired last year after 47 years of service to Timken, most of it as a blind employee. Canton and Timken showed the world what America is all about. Thank you for letting me join you today. I'm willing. Thank you all very much. Thank you. If I could just make a personal note in here. If some time again they happen to show the Canute Rockney film on television when the Gipper scores that touchdown, if you look at the fellow in the dark sweater standing right over beside me before I start for that touchdown run, that was Jim Thorpe. He was playing an assistant coach in the picture. And it was a great thrill for me to get to meet the immortal Jim Thorpe. I just had to throw that in.  God bless you all. I've just given the president a cross-section of a steel tube that was the first one through the STTF. FTC. There's not the leader here. David. Not the leader. David. Must be working on one. Do you work on one? It might be. Can you see the ingress? Yeah, he's working the line. The mic's working. There they are. Working the line. Yeah. See the mics in the air? Got a shot. Have you got a shot? You got a shot? He's this guy going on the radio.  They don't do the radio.  Look at him.  You tell me. What's up? Sorry, please. What about the police? The police? It's real. The police said they... They're in the state. They're in the city. They're in the back of the old town.  Yeah, I go ahead and ask for help. They're going to find them. Yes, please. We got him all the money. We got into it. I wonder why they have it.


Good morning everyone. Can you hear me? Can you see the screen? Yes, we can. Okay, thank you for this invitation. Thank to FAO for organizing this event. My name is Antonia Lembergia and I've been working in the wine industry for 17 years now. I worked in different wine regions in Italy, Sicily, which is also my hometown. Tuscany, Veneto, Lombardia, actually some of the most vocated wine regions in Italy. And what I would like to share with you today is my observation of how wine and wine tourists have been an important, are actually an important leverage of development in these areas. And this will be the topic of actually my presentation. So let's start from the basics. What is wine as a school definition? What is wine tourism? As we can read wine tourism, it's about going to a specific place to enjoy a product wine, but not just that. It's also about discovering a territory and discovering the community that lives in that territory. And it immediately comes to our attention that it's about sharing an experience with the value that comes with it. So this is can be also applied not just for wine, but for many other agriculture product as we can see later on. I think also that wine tourism is a sort of evolved form of rural tourism in the sense that it comes at a later stage of a long developing process and that is composed by certain stages. So I will try to give you some examples of these experiences that I had. So I think that farmers starts to understand the potential that they have in a given agricultural product. And they take pride in that and they improve their skills. So the first step is like the identification of these potential. Then they start to market it. So they start to find unique selling points. And in wine, this is true, for example, in grape varieties or in production method or in the unicity of the soils, identify some specific features that can add value to the offer to the proposals. So here you start to need some specific professional competencies. And then you have to put this offer on the market. So you need also marketing experts. After doing that, you start to build a brand. So it's not just a generic product in a generic territory, but it's a specific name. So you name it, you label it, and you start to tell a story. And this is, for example, the case of the appellations, wine appellations. Italy is divided in different wine appellations identifying specific areas. One example is Brunello, one of the most famous red wines in Italy and in the world, Amarone. And again, one examples of very famous red wines, but it's not just wine, it's other agricultural products. In Italy, we have, for example, Parmigiano Reggiano, which is a product identified a specific area and which is well known and an international best seller or a prosciutto di parma, or again the apples of Trentino. So these are all examples of agricultural districts that have capitalized on their agricultural product, creating wealth and helping the local economies. Last but not least, of course, communicating this telling a story, which is not just a story of a product, but it's a story of a place of a community. This makes it unique, of course. So it's not just telling a product, but it's more just an entire territory, which is actually the point of all that, because it's just like that that you sell value and add value to the chain. So what are the implications, the positive effects of such a process when it starts to work. So to create value for the territory. Let me give you again, an example in wine. Montalcino, which is the village where Brunello is produced back in the 70s was one of the poorest and most depressed economic area of Italy. Nowadays, after wine, after wine tourism is one of the most well known, most prestigious million of people come every year, and it's a very wealth area. You create jobs and infrastructures, of course. You put small villages on the map. You put these small villages at the center of three secrets. People come in these places, which become approachable, reachable. You create beauty because landscape change and it changes for the better. In one regions, you have these beautiful fields covered by vineyards, which are cured like they were small gardens, actually. And beauty brings always positive effects. You make people stay. You make young people stay in their place of origins. They have a chance not to live. They have a chance to stay in the territory and to have a perspective to have livelihoods and to live in the place they were born. You stimulate collaboration between local entrepreneurs because of course these agricultural districts are systemic by definition. If you are not there to sell a product or to or a brand or just a company, you cannot do that all alone. You sell an heritage. It's a shared heritage. And this implies of course collaboration, partnerships, and a system. And you preserve biodiversity, promoting sustainable development. And this is a very important issue, of course, because researchers say that ecotourists prefer green practices prefer going in places where environment is protected. And these of course pushes companies to aligned to green protocols. And this is a very important positive effects, of course. So what happens when this system works, I can give you again the Italian examples, Italy is the world's largest producer of wine, and it has numbers of different appellations wine appellations so it is naturally conceived to to to exploit the potential of wine tourism and these are some numbers wine tourism in Italy amounts for 3.5 billion euro and welcome every year 15 million visitors. These are people who comes here and began becoming brand ambassadors they go back in their homes in their homes and they tell family and friends what they have experienced so they export value they export the made in Italy and invite people to come in the future. So what are the big takes home for other areas of the world. So agricultural products agricultural districts if well managed are a proven boost for rural economies, this really works. These brings wealth, wealthy these brings perspective to people to community. So that you need specific professional competencies, you need people to understand the product to understand how to enhance it. You need the marketing experts to put these offer onto the market and to build brand and value. So this is very important issue of environment, agro tourism preserves biodiversity and bring people into the nature, becoming more sensitive and more aware of the environment. So my presentation finishes here. I thank you for your attention and I hope to have given you a small practical insight of wine tourism. Thank you.


Right now I'm going to be sharing with you my morning skincare routine and the reason that I say you can't have pretty makeup without good skincare is because no matter what you do with your makeup no matter what techniques you follow you can follow the very best makeup artist there is on the planet do exactly what they do but if your skincare routine is lacking then you're going to have a little bit of a problem. This may seem like a lot of steps and I want to make sure that I tell you beforehand that you do not have to have all this. I'm going to say this over and over again in the video. You do not have to have all these steps. Don't forget that I do have a number system that will correspond to the products and you can go down into the description box and the link will be there that you can click on and go to the product and shop that way if you'd like to. Alright let's get into my morning skincare routine and a whole lot of extra stuff that I do that you can put into your routine or just stick to the very basics you decide what's best for you. Let's go. Morning time Avino Positively Radiant Brightening Cleanser. This is just to take off any of the moisturizers that I have from the night before any dead skin that is possibly building up and I just go ahead and put that everywhere. I also try to get off any leftover eye makeup that possibly didn't get taken off. If you've never seen me use these little towels before I want to tell you that these are the best microfiber towels to take off your eye makeup or any leftover makeup from the night before. They're super soft. They come in a pack of six when I buy them. I buy them 12 so that I have extra and then the older ones I use while I'm doing my makeup for brush cleaners you know just to dust off my brush or whatever spills whatever may happen and I love these things. Once I'm done with that I go in with some sort of an exfoliation that is chemical and this one is the AHA, BHA, PHA, 30-day Miracle Toner from some by me and this is fantastic. Now what I do I don't use cotton rounds. I just pour it into my hand a little bit into my hand pat those hands together and then just spread it across my face. Now I'm using a glycolic acid in the morning and the reason is is because I wait five to 10 minutes in between this step and the rest of my skincare in order to let that acid calm down because I do use a vitamin C in the morning. Now I would not recommend that you do both. I have gotten to the point to where my skin knows what I'm going to throw at it and I've been doing this for years so I would recommend that you maybe just push the glycolic to the evening the acid any acids that you use to the evening and do that two times a week and you're retinol five times a week.  So I will give it about five minutes to just rest. I'll go brush my teeth and then I'll come right back to my skincare. I'm going to go ahead and put on some of my other skincare before I do that vitamin C is the very last step well right before moisturizer SPF. This one is Bliss. This is the Disappearing Actinicinamide Poor Vanished Toner and I love this because it comes in great big huge bottle. It's an essence. It doesn't have any extra ingredients in it. Once again pour it into the hand splash it around and just get it everywhere. I've had a lot of people since I did a short video ask me how I keep my pores down and this is it. Nice cinnamide and galactomyces bifida. Those three products are the superstars in helping me to keep my pores down. Now you notice I'm pushing down a little bit I get a lot of feedback from don't push down on your neck. I push so gently that doesn't matter but if you're somebody that really is bothered by that make sure that you push your neck upwards and your face upwards. I do that with gua sha after I'm done with all of this so doesn't bother me too much to not be pushing things the right way as I'm applying product. Okay so next thing is that vitamin C. This is the Naturium Vitamin C Super Serum Plus. I love this stuff. This is my superstar. I use this all the time. Naturium I hope I'm saying that right but it's been become one of my favorite lines for skincare. I was told recently that it was made in the USA and also I love that they don't put any fluff ingredients in here and so I'm going to make sure I put this all over my decollete. Can you see that my decollete or my chest is just so much different color than my face. I do have several spots that I'm trying really hard to work on on my face as well but I'm also wanting the protection that a vitamin C gives with antioxidants against any harmful damage from pollution or from free radicals that kind of thing. Now I get asked a lot what do you use for your dark circles or what would I recommend for dark circles. There isn't a lot but I will say that if you have puffy eyes with dark circles one of the things that you can do with both of your routines and it takes just a second is take your two knuckles on your four fingers and just rub very gently and rub out with those eyes and yes you're tugging a little bit but you're wanting to do it fairly gently. Do it about 10 times.  I have a whole gua sha routine but in the morning if I don't have time doing this about 10 times really helps. The other thing it does is stimulate blood to that area and will help that bluish color a little bit. I have inherited dark circles so it's really hard for me to get rid of those no matter what I do. I end up having to cover them. After vitamin C I'm going to go in with an eye cream. I recently just discovered this. This is the new one I'm using. I'm testing right now. It's HPRI cream. It's hydropinicolone. Anyway it says improve and prevent the signs of aging around the eyes. You're supposed to use it twice a day which is what I do. I use a very small amount. I don't even use a complete pump of it. I use maybe like a half a pump of it and then I put it on those in or my ring fingers not index fingers sorry and I'll put it on there and then I will just pat it around very gently. This is the one that I am currently testing. A few videos ago I did put out a video on all kinds of eye creams that I do love and I do feel like are effective. I'll make sure that I link that down below so that you can go ahead and look at it because again I test so much but those were ones that were tried and true and I do have two of those actually in this video. I want to finish up serums with number seven. Now please keep in mind this is what I do for a living. I use a lot. Stop at one serum. If you don't want to use a lot of serums use a good vitamin C. That's all you need in between your cleanser vitamin C moisturizer SPF. That's all you would need. I have used a couple of more in here because I add in things and these are things that I want to show you. I get asked all the time what my routines are so I'm showing you. This is the number seven future renewed damage renewal serum. This has new technology. I attended a webinar for this and I do believe that this is one of those very innovative products that doesn't have a huge price tag that I feel like will make a big difference in. For me it's making a big difference in what I'm seeing right through here in my eyes and I'm just enjoying it so much because they do have an eye serum. I'm going to go ahead and put that eye serum on top of the other one. Again this is all extra. It's completely all extra. You do not have to do that this. These are the ones that I'm just currently trying loving knowing that I'm really enjoying. Please do not feel like so many steps have to go into your your routine because that's just not the case for it to be effective.  My hands have improved so much and then of course I get my huge dose of moisture from this product that is in every skincare routine I've shown for about seven years. Soakoyakasuhara urea moisture essence and this is just padded on top of everything that I've put on here to lock everything in and then I'm going to put my moisturizer slash spf on in one step but this is just so moisturizing. You can do this at the very beginning if you want to to plump up your skin and get it ready for all those other products that you're about to put on it. You can do it at the end like I just did. Also on days like you're coming up with the heat on in the homes and then it being very dry winter days I will use the Soakoyakasuhara eye cream and I will go ahead and put that underneath and on top just to be able to plump plump plump and that's really what I love about a morning skincare routine is you're plumping everything up in order to completely prep for makeup. All right very last step I'm going to go ahead with the dermatology universally. Let's see this is the physical tinted moisturizer SPF and I'm going to go ahead and I'm going to use that. I'm going to use quite a bit of it. I love that this is tinted it helps me feel like I've got a little bit of something on in the day when I don't go in with any makeup but at the same time it doesn't interfere with my makeup and it's hyper moisturizing.  All right that's my morning skincare routine I hope that you did enjoy seeing this. I will be bringing you my evening skincare routine very soon so that you can see that. Although this is my job please don't forget that I never want you to feel pressured into buying anything. If you do buy something through my links I do earn a small commission and I thank you so much for that. Thank you guys so much for being with me today. Take care of yourselves. Hope you come back around really soon in my next video. Love you much. Bye my friends.


OK, so we've talked about the network. Hopefully, that gives you some background for things to look out for, things you could look forward to in the future, like HTTP 2.0 and other things. Now, let's talk about this concept of a critical rendering path. So the idea behind the critical rendering path is there are certain sequence of events that need to happen in the browser before we can paint something to the screen, right? Put some pixels on the page or on the screen. Effectively, this is the sequence that happens, and we're going to go through it and try to understand what are the bottlenecks along the way. So first of all, what's so critical about the critical rendering path, right? Let's start with a very simple example. This is a five-line HTML file and a CSS style sheet that I want to render on the page, right? So all I have here is a title called Performance. I am embedding a reference to a style sheet and external style sheet, and I'm just printing Hello World. And my style sheet just contains these two rules. So if you pay attention here, my span is actually set to display none, right? So in theory, when the browser actually renders this, it should just say hello, right? Nice and simple. This should be rendering in like nanoseconds, right? Everything's nice and optimized here. Well, not so fast. So first of all, let's start from the beginning, right? Recall the earlier slide when we were transferring a tiny little 20-kilobyte file, right? So we're sending this data in chunks. So just for the sake of an example, let's say that we get the first part of the HTML data, right? So we send the request, we get the first packet, and it just contains the stuff here at the top, which is doc type, meta, and title, Performance. So it comes in off the network, we get partial HTML of this entire file, and we can start constructing the DOM or the document object model of this page. And this part is important, right? So at this point, the screen is blank because we haven't received the full HTML. And the important part about the parsing and the construction of the DOM is it's actually done incrementally, which is to say we start with bytes on the wire, the bytes come in, we interpret them as characters, and then the browser starts creating tokens out of the string, right? So it looks at the string and says, OK, there's a p tag, there's a hello string, a start tag for a span, and all the rest. It creates nodes out of it, and then it connects these nodes into this tree here, right? And basically what the HTML5 specification provides is a specific algorithm for how you go from the top, which is a text string, to a tree that looks like this, right? So the HTML5 specification actually gives us a very concrete sequence of steps to say, this is how the tree should look like at the end. This is important because prior to HTML5, there was no such specification, which is why there were so many differences between different browsers. We would take the same HTML, and we would give you a different tree at the end, and it's like, what happened there? So this is one of the great things about HTML5. We finally have a spec for this thing. Great. So we're constructing this stuff. Now let's say we got the second packet, right? So now we have a reference. We discovered the reference to the link tag, or the style sheet, and immediately the browser is going to send that HTTP request. It says, well, OK, this user is asking me for the style sheet, let me dispatch that request on the network. In the meantime, I can proceed and continue to parse the HTML and construct the DOM. So at this point, we've actually finished. This is the end of the HTML file. We have the HTML, we've parsed the DOM, we have this object model, but nothing is on the screen yet because we don't have the CSS yet. What would happen if we rendered the DOM without the CSS? Well, you'd get an ugly, unstyled page, which is not a nice experience. So this is known as a flash of unstyled content. So basically, at this point, we just block and we say, look, until we have all of the style information, we can't put anything on the screen. So in the meantime, we're waiting for the network. We're waiting for the request for the style sheet. Next, our two-line style sheet actually arrives in two packets. And I'm kind of using this as a silly example, but you can imagine a larger style sheet which has many different styles. And we got the first line here, which is the p tag. Notice that unlike the construction of the DOM, we can't actually parse the CSS incrementally. Because of how the CSS is specified, we have these cascading rules, we need to have the entire file before we can evaluate it. We can't incrementally build it up. So if this takes us 200 milliseconds to fetch, we have to wait for 200 milliseconds for the entire CSS file to arrive. Which is also an important takeaway right here, is if you have one giant style sheet, even if you split it into multiple style sheets, that may be beneficial because we can construct those or evaluate those incrementally. So concatenating everything into a style.css may not be a good rule, especially in mobile. So great. Finally, we got our last line. We can construct the CSS object model. So now we have two trees. We have the DOM object model and we have the CSS object model. Except that we still can't paint anything. So the screen is still blank. Next, what happens is we actually take these two trees, the CSS object model and the DOM object model, and we build a new hybrid tree out of it. So for example, here we have our body tag. We have the p, the paragraph tag with hello, and then there's our span. And our span tag, which is the CSS rule that says display none, gets applied to this guy right here. And what we get at the end is a thing called the render tree. And notice that there's something missing from the render tree. Notably, the span tag is missing. So what we've done here is we're saying, look, if it's not going to be displayed on the screen, there's no point for me to spend the CPU cycles to render this thing, only then to hide it. So elements that are displayed none are just not part of the render tree. So at this point, we've taken these two trees and we created the render tree. Notice that the screen is still blank. This is all work that's happening within the browser. And in fact, there's not just one render tree. There's not a million, but a whole bunch of render trees out there. And some, so why do we need this? Well, certain elements may have special implementation details, for example, a video tag. A video tag has its own layer and its own priority, where it may be hardware accelerated or GPU backed. So we have these different trees that are being balanced, and they all need to be synchronized between each other. So this is just to illustrate that there's a relationship between all of these. So the idea of the critical rendering path is exactly this. What we have gone through here is we got bits off the wire. We've constructed the DOM. We've asked for the CSS. We've constructed the CSS object model. We've built the render tree. In theory, now we have all the information that we need to start putting something on the screen, painting pixels. Except there's also the layout phase and paint. So what is layout and paint? But before we even get there, I guess, a couple of takeaways. So HTML is parsed incrementally. What does this tell us? Well, it actually means that if you can, you should be delivering the HTML incrementally to the browser. So here's two different strategies that your application server could use. You could generate the entire response, let's say, wait for 100 milliseconds to generate the entire index.html file, and then ship it all at once at the end. That's one strategy. And the other strategy is to say, well, OK, great. I've got everything up to like half of the page now. So I'm going to flush that to the user, and I'm going to feed you the next part of the page after that. The second strategy is actually much better, because we're parsing the HTML incrementally, which means that we can discover the CSS style sheet much quicker. So a fun example is our Google search pages. So what happens? We want to make the search pages really fast. So we have this nifty little trick where you send us a packet with a search query. And before we even understand what the search query is, we immediately send you the header response of the page, which is like, all of the search pages have the same header. So we don't even know what you're asking for, but it's just like, here's the header. Start parsing the HTML, start fetching the CSS, or any other resources. And then once we send that data, we actually look at the query index. OK, so what are you asking for? Search for fluent. OK, let us query the search index, build the actual result page, and then deliver all the rest. So we can progressively fill this in. So this is a low level example, but this is something that you can leverage. The other important takeaway here is rendering is blocked on CSS. So if you're delivering a lot of CSS or splitting it between different files and you can use different strategies, but we have to have all of the CSS before we put anything on the screen. So CSS is truly critical if you want to have a fast loading page, have visual output. So you want to get the CSS down to the user as quickly as possible. Sometimes that may mean inlining some of the styles into your page. Sometimes it may mean like, hey, I have a giant style sheet and I only need 50 styles out of 500 on the specific page. Can I deliver just those 50 and then load the others later after the fact? Because otherwise, you're just blocking the entire rendering waiting for those other 450 unused styles. And we'll see an example of that in a second. But this is kind of a cute example, a five line HTML file, but didn't we just forget something, which is critical to most of the web apps? There's this guy called JavaScript, our friend and foe. So our friend, because JavaScript is truly what enables the web to be what it is today, right? It's dynamic, it responds to your input, it does everything that we need, and allows us to script all of these applications. But it actually makes the story much, much more complicated. For example, JavaScript can query the DOM and it can also query the CSS object model, right? He can ask for like, what's the style of this element? Or let me grab this element. Let me change the style of it. You know what, I'm going to add a new DOM element with a new style on it, right? This is how we build these apps, but it actually makes the performance story much more complicated. So here's an example, right? With JavaScript, we can be clever and we can say, look, I've got this string, but I don't care, I'm going to execute a JavaScript. I'm going to execute the snippet, which is I'm going to write into the actual HTML markup, right? Document that right. I'm going to pass it a string or whatever.  So why is this a problem? Well, recall that we're parsing the HTML incrementally, and then let's say there's a script tag, right in the middle that says, I don't know, awesome script.js. When we execute that awesome script, you can actually inside of that script say, well, I'm going to write a bunch of new HTML right below my current script tag. So whenever we discover this tag, the script tag, we say, look, we don't know what you're going to do next, because you could be changing everything that comes after the fact. So we're going to stop the world right now. I'm going to wait until we fetch the JavaScript code, execute it, and only then can we proceed to parse the HTML and the rest. So it literally blocks both the DOM construction and everything else. So we have to fetch the JavaScript, and we have to execute it before we can proceed, right? So putting a JavaScript tag at the top of your file will just basically block you on the network until we fetch that file, which is why if you've ever come across advice of, put your CSS at the top and JavaScript at the bottom, well, now you know why, because putting your CSS at the top means that we discover it early, and if we discover it early, we can fetch it quicker, and that unblocks rendering. Putting your JavaScript at the bottom means that you will still block, but hopefully by that point, we've already constructed most of the page, so you're not blocking much, right? So it's still kind of not a great outcome. We still have to block the page, but that's the reason that rule exists. Also, no performance talk is complete without talking about asynchronous scripts. Here's an example. So this is just an example with the plus one widget, right? Oftentimes, and this is not just for social widgets, this is for any JavaScript, Google Analytics, all the rest, you can have two variants of this. You can say, look, I'm going to include the script tag, and it's going to be the plus one, and it'll add the functionality that I need on my page, or I'm going to use this kind of crazy looking asynchronous function thing at the bottom. It looks scary, right? I'm not sure if that's even going to work. Should I use that, or should I use a simple one? I understand the top one. The problem with the top one is it will block the rendering of the page. So whenever you put it, we have to stop the parser, fetch that file, execute it, and only then can we proceed. With the asynchronous version, which is kind of this pattern here, that can be applied to any JavaScript code, this will fetch the script asynchronously, right? So we don't have to block the parsing and the construction of the page. Another interesting feature that we have, and it's actually well supported across all the different browsers, is this async keyword. So the idea here is, here's the case that we've just described, right? We're parsing the document, everything's good, and then we encounter this tag here, which is file a.gs. At this point, we need to go out and fetch the file, right? So this is the blue line here, which is we add some extra latency, network latency to fetch the file, we parse the JavaScript, and then we execute the JavaScript, and only then can we proceed to build the actual page, continue building the actual page. If you add the async keyword, the async keyword is basically a promise, like it's a handshake that you give us and say, look, I promise I'm not going to dock right. And that keyword allows us to then say, okay, fine, we won't block the construction of the DOM, we will continue to, we will start to download, we will start downloading the JavaScript, and we'll just execute it whenever it's done, right? Because you promise us that you're not gonna just like, we'll nearly modify all the HTML markup on the page, right? So if you can, you should use this tag on your scripts, and that will certainly make performance much better, because we don't have to block on the network here. So we've covered this already, but here's an example, right? A very simple example. I grabbed a reference to some element on a page, I can query its style, which is basically going to the CSS object model, and I'm extracting the width, right? And I can also update the width, right? So I can do this from JavaScript, so I'm basically modifying the CSS and the DOM object model variables. And here I'm just writing a simple string into the document directly. So first of all, you don't wanna be doing document that writes to start, but the important takeaway here is JavaScript can block both the DOM construction and CSS, right? So think of it this way. Recall that we couldn't paint anything until we had the CSS. Now what if your JavaScript also asked for a CSS property, right? So JavaScript can block on CSS, and now you have this kind of funny relationship graph where you say, okay, I started constructing the document, I'm fetching the CSS, I'm gonna try and execute some JavaScript at this point, except I can't, because you may be querying for CSS, right? So once again, you wanna get the CSS down to the user as soon as possible. You wanna avoid having synchronous JavaScript files as well. So putting it all together, right? Stream the HTML, this allows us to incrementally construct the page. You wanna get the CSS down to the users as soon as possible, and avoid doc write or use async scripts. So that'll help us with the initial render, speed up the initial render of the page, or at least it removes some of the speed bumps along the way, right, that are inherent on a lot of the different pages. So let's look at an actual example. Actually, before we get to the example, let's say we wanted to deliver a great experience. We wanna break the mobile, break the one second mobile barrier, right? We want to deliver pages within one second. As we saw previously, just the latency overhead of a 3G or 4G network is about 800 milliseconds, right, and higher on the 3G network. For 4G, we were down into kind of 400, 500 millisecond territory, so we don't have a lot of time. What does that tell us? Well, the server processing time must be really fast, ideally below 100 milliseconds, right? If you're taking hundreds of milliseconds or seconds, there's definitely an area that you should be optimizing for, specifically for mobile, and if you wanna hit this goal. Then, we've fetched all the resources. Your server response time is fast. We also need to make sure that we allocate some time for the browser to do all of this work, right? We just described a lot of this, like constructing the DOM, CSS DOM, render tree and all the rest. There's a lot of overhead associated with that, to paint that. So we need to allocate some time on top of within our one second budget for this extra rendering time. So, some very simple implications out of this, specifically for mobile, like if you wanna break the one second barrier, we have to inline requests. We have to inline resources, right? And just earlier, I was talking about ECB-2 and houses an anti-pattern, yeah. And I think there's a lot of interesting room for kind of head scratching for how do we solve this problem, right? Maybe we can use server push to deliver instead of inlining. But basically what this tells us is, if you wanna deliver the page within one second, we can't afford to make extra HP requests because just the latency overhead of that first request is basically a second. So we need to deliver as much data, as much useful data as we can within that first second, and that's how we unblock the rendering. So if we want to have fast mobile sites, that's what we need to do. And then I'm not saying that you need to render everything within one second. I'm just saying you need to render something useful to the user within one second, right? Maybe it's the head of the page, maybe it's the basic text. And then after that, you can continue and progressively load the rest, right? Defer all the other JavaScript, you know? You don't need your social widgets and other things to fire immediately within the first 100 milliseconds. Your analytics beacons and other things, all those things can fire afterwards. So here's an example, a slightly more complicated but nonetheless very simple one, right? We have a simple HTML file with a style sheet reference and a script reference. And I can tell you right now that this page on a 3G phone, as simple as this page is on a 3G network, this will not likely render in one second, within one second, right? The only, and the reason for that is, you know, we need to make an extra HSP request. So there's a round trip to get the HTML file. Hopefully we're streaming this HTML back, but then we need to make the style sheet request and we need to fetch the JavaScript code and the JavaScript code will block the construction of the DOM later, right? So all of these things are working against us. How do we work around it? Well, we have to start inlining things, right? You say, okay, I am going to inline my critical CSS styles and what's critical CSS styles? Well, maybe once again, it's like the header of your page or something meaningful, like even the loading bar, right? That's gonna come directly in the page and yes, there's a cost trade-off here, right? And what I'm saying is you're inflating the size of the page by inlining this potentially across all of your different pages, but maybe that's not a problem for your site, right? You want to isolate the critical CSS and have that as part of the initial page. Same thing happens for scripts. Ideally, actually, you don't even have scripts at the top, right? It's true that a lot of applications require JavaScript today or pages, I should say require JavaScript, but it was also true that a lot of the JavaScript is enhancing the experience, right? So you're loading jQuery to add on-click handlers, you're adding social widgets, you're adding interactivity, but that doesn't block us from first getting the content rendered, right? And then loading and adding those things incrementally afterwards. So most of the time, you can safely, at least in my experience, you can safely defer most of your code until the first render happens and then add that functionality. This may not be true for your single-page app experience because your single-page app is the one rendering the entire application. And in that case, I anticipate this question, like how do we make this work for one-page app? The question, the answer is like tough luck, right? Because chances are you're gonna be fetching a JavaScript file with a lot of templates in CSS and other things, and in short, you probably won't be able to hit this goal. Although there's maybe there's some tricks that you can use with similar techniques like inlining and all the rest. And then just at the bottom here, I'm showing you that we can just create a simple function to say load this after the first paint, right, so get it out of the critical path. You don't need all of the JavaScript immediately. So how do you even identify something like what the heck is critical CSS? One nice tool that you can use is if you open up your Chrome DevTools, you can actually go into the audits panel and within audits you can actually run a performance audit and it'll look at the number of different things on your page, but one of the rules it looks at is actually the CSS that is being used on the page. So here you can see that when I ran this example, there was about 55 kilobytes of CSS on this page. Oh, sorry, yes, 55 kilobytes of CSS on this page, but 60% of it was not being used, right? So this is shared styles across many different pages and perhaps we can somehow split the critical and non-critical CSS, right? So some of these files probably didn't need to be loaded initially, right? They could be loaded after the fact and that would accelerate the rendering performance. Another example, and I'm not sure if Wi-Fi is acting any better now. If not, we have some screenshots. Yay, okay, so another interesting tool that we have is our pay-speed insights tool. Of course, you can look at your waterfall within your Chrome DevTools or Firefox tools and all the rest. This is just kind of the same view, but on the web, right, and yes, it's tiny, but we're looking at Guardian Co-UK and this is all of the files that we need to load this page, right? So it's big, there's over 100 different files. There's CSS, there's JavaScript and all the rest, but not all of these files are required for us to first render the page, right? So this is why we have this highlight critical path button and look what happens when I click on it, right? That entire page, the entire waterfall collapses down and so basically this sequence here. And what the sequence tells us is, yes, you have 80 plus files on your page, images and other things, but these are the files that are critical for us to actually get something visible, right? Like, here's a sequence of JavaScript, CSS files and other things that we need. So this is a great way to kind of look at your own site or any site for that matter and figure out what is that sequence? Like, what's currently blocking my performance? So let me go back and actually show you some examples here. So when I grabbed this snapshot earlier, first of all, when I went to Guardian, it issued a redirect, right? Which on mobile, of course, is extremely expensive, right? We just said that we just want a spear quest that's gonna take us about a second. Now, if you redirect me from, you know, www.guardian.couk to m.guardian.couk, that's a new host name, which means a new DNS lookup. It means a new TCP connection. It means basically they're starting all over, right? Right from the beginning. And in this case, it's 300 milliseconds and that's, you know, on a very fast network. So redirects on mobile, ideally, the number is zero, right? You should avoid them whenever you can. And then after that, we can start looking at, you know, how is this page being constructed? So you can see that Guardian's actually doing a good job, like they're shipping. So the green bars here are the CSS files. So they are, in fact, putting the CSS at the top, which is good, exactly what you want. But then later, they start loading JavaScript files, right? And so here they're loading the jQuery.min plus some other plugins, so far so good. Except then, they encounter the, they have, I guess, their own show ads script. And the show ads script issues a document.write to write the Google ad code, right? And if you recall our earlier discussion, that's definitely an anti-pattern, right? Because this will block all of the rendering. And not only that, but because this code gets written as part of the script, we can't discover it early, right? So the document parser is smart in the sense that it can actually look ahead a little bit and say, like, hey, are you gonna be asking for this image file, right? I'll look ahead and just start that request. With document.write, we can't do that, right? We have to wait until you write it into the document and only then can we dispatch the request. So this is why there's this really high amount of latency here. And then later, there's just actually some really long-running JavaScript on this page. I didn't really dig into as to why, but a good opportunity to profile your JavaScript right here. No, let's skip that. So what that showed you there is the idea of a critical path, right? And certain things you can do to optimize the rendering part of it. CSS, DOM, and JavaScript. Once we've loaded the page, right? So we've gotten to the first paint finally, like hopefully within one second. Once that's happened, we enter a new, basically phase in the lifecycle of the page, which is the in-app performance, right? Now we need to sit and just render the pixels and react to user input. And hopefully we're doing this at 60 frames per second. So same pipeline, except now we're running in a loop, right? Your JavaScript is likely what's triggering events or maybe it's the user triggering events, right? Scroll event or clicking a button or clicking in a form or doing one of these things. And each one of these events is going to trigger a couple of different things within the browser. It can trigger a style recalculation. It can trigger a layout or a paint update. And we'll talk about each and every one of these. So as I said, performance in this phase is 60 frames per second. And this may sound a little funny. It's like, look, I'm not building a game here. I'm just building a web page, right? Like what gives 60 frames per second? Well, it turns out that it actually matters. So just recently, Facebook shared some interesting story where they intentionally slowed down their timeline from 60 frames per second. So when you scroll your timeline, right, they slowed it down from 60 frames to 30 frames per second. And they found that the engagement of users with the timeline dropped, meaning they viewed fewer stories. They didn't scroll as far, et cetera. So that extra jank, if you will, or the skipped frames literally translated to fewer engagement or less engagement from the user. And if you do the math, what's 60 frames per second? We have 1 second, 1,000 milliseconds, divided by 60 frames per second. That means we have a budget per frame of 16 milliseconds, which frankly is not a lot of time. So 16 milliseconds. So what's a frame? We need to render 60 frames per second. So that's this line at the top here. And each frame has 16 milliseconds. And there's a lot of things that we may need to do within each one of these frames. First of all, your application code needs to run. So let's say I click on a button, right? And there's a handler associated with that button. So you need to process that input and do whatever that you need to do. But then after that, based on whatever your code did, I may need to, as a browser, I may need to trigger a style of recalculation, right? So let's say I click on the button and you're trying to open a new window, right? That may reflow the DOM. That may create a lot of JavaScript garbage. And I may need to update the actual pixels on the screen. So it doesn't mean that I have the steps here. They don't necessarily happen in this order. And GC doesn't always happen in the middle and layout and paint. And in fact, that's the ideal case where your code runs. And then we do a little bit of cleanup at the end and we paint the pixels. That is the best case scenario. We'll see why this is often not the case and why it's a performance problem. So what happens if we can't finish the frame in 16 milliseconds? Let's say I have a long-running function, right? The user clicks on a button and I, I don't know, I'm trying to compute pi, I don't know, right? So some expensive function. And if we can't finish it in 16 milliseconds, we cross over that budget. Basically, we just skip a frame, right? So let's say it took 17 milliseconds. Great. The browser does some cleanup after that. But then we wait until the next paint, which is 16 milliseconds after that, right? So basically, we have these fixed intervals within the browser. We say, we're going to paint updates to the screen at these fixed intervals, or that's the v-sync interval if you want. And if you just happen to cross one of these thresholds, we'll just wait for the next one. So if your code consistently takes 20 milliseconds to run, we will paint at 30 frames per second. If your code takes more than 32 seconds to run, you can do the math, right? So it's not like we don't really have, like, you finish your code and we paint. We have these specific v-syncs that you have to hit in order to deliver consistent experience. And a dropped frame is what we lovingly call as jank in the browser. So the takeaway here is whatever code you need to run in order to deliver 60 frames per second, it needs to run within 16 milliseconds. In fact, it needs to run much quicker than 16 milliseconds because the browser also needs to do a lot of extra work, right? Like, you've done your stuff. Now we need to do our stuff, which is we may need to update the styles, the DOM, the painting, the everything else. And this cost is, of course, variable, right? Like, 16 milliseconds sounds like an absolute term. It's not because 16 milliseconds of CPU time on a mobile device is completely different than 16 milliseconds of CPU time on a beefy desktop, right? So as a rule of thumb, you probably want to aim like you're developing it on your laptop. You probably want to aim to complete all of your work within 10 milliseconds, right? That gives us enough of a buffer and hopefully even less, much less, right? But 10 milliseconds is kind of like that barrier where if you're not hitting that, then you're definitely dropping frames on mobile. And the important thing here is if your code takes, let's say, 100 milliseconds to run, we can't interrupt it. We can't interrupt it and say, like, OK, let's paint an intermediate frame, whatever that means. If you run for 100 milliseconds to 100 milliseconds, it just blocks, right? So if you ever had the experience of, for example, you come to a site and you start scrolling and it's kind of like, it's janky for like, I'm not sure if that's the right word here, but like it just skips, right? That's what happens. You're probably firing some JavaScript code which runs in the background. We can't update the screen. We can't scroll the screen because the JavaScript code is taking so much time, so we're dropping frames and that's why you get that slow experience, right? So also frequently, before I was aware of this, I would come to a site which was with a lot of JavaScript handlers, usually like an on-scroll handler, right? Because they would attach it to say, like, I'm going to drag this element as you scroll down the page and it would be very expensive.  And then you profile your code and you're like, actually no, no, that's not the problem. The laptop won't help. It's just the site is really slow. Or the JavaScript is taking so much time. So here's an example. This was actually a screenshot that I took a few months back on a very popular web destination, right? So lots and lots of users. And what you can see here is this is directly from Chrome. If you go into Timeline and you start recording, we will actually show you how much, so each one of these bars is effectively a frame, right? And how much time the frame took to render. The yellow bars show you the JavaScript execution. So we can see here is an event, a scroll event has fired and there's a long running JavaScript function after that. In fact, in this case, this function took 46 milliseconds. So because it took 46 milliseconds, we dropped three frames right there, right? So we're not delivering 60 frames per second in this case for sure. And even worse, this implementation, I'm scrolling the page, it's firing the event scroll on every single time. And this JavaScript function runs every single time event fires. So in fact, within this frame, we did the same work twice, which is useless if you think about it, right? What you want to do is you want to register the fact that an event has happened within that one frame, handle it once, and then defer any work until after, right? So it's a very common problem for a lot of sites on the web today and something that we need to fix. So a simple way to fix it is if you guys are not familiar, you can use the request animation frame callback, which basically says, call me every time a new frame starts, right? And the browser just calls your function. So what you want to do is you want to register the scroll events, put them in a queue, and then when the request or the RAF callback fires, you say, OK, I have some outstanding things that I need to handle. Let me handle them, and then I'll defer all the work until the next frame. Similarly, if you do have a long running function, maybe you can split it, right? Maybe you can actually say, well, I'm going to do this part of the work now, but then I'm going to yield control such that I can update the browser, can update the screen, and then I can continue running it, right? So it definitely requires a bit more work on your part, but it's definitely worth looking at, because rendering performance definitely matters. And at this point, of course, it helps to talk about profiling your JavaScript code. Chrome provides a couple of good tools for this. In fact, we actually provide not one, but two different profilers. We have a structural and a sampling profiler. And what the heck does it even mean? John and myself actually did a full one-hour episode on the difference between structural and sampling profilers and why you would need either one. I'll give you a very brief version, but if you want, if you think JavaScript performance is your bottleneck, I definitely encourage you to check out the full video.  We pause every, let's say, 100 milliseconds, and we just look at what functions are executing. And then record that. We let your code run, and then we pause, examine the stack, and basically it's a sampling profiler, which may or may not be the right tool to find the problem in your code. Sometimes it may capture the exact problem, like if you have a really expensive function and you're always blocked in it, great. The sampling profiler will identify it very quickly, and that's probably the tool that you want to start with. But the structural profiling actually allows you to go deeper. Instead of saying, we're going to sample, we're actually saying here are the points that we want to check point, and you want to measure the time taken between these two points and how many times we've executed it. So to use that, you need to use the Chrome Tracing functionality. And the way this would work is in your JavaScript code, you could actually annotate the specific work that you're doing. So for example, console.timeA and then timeN. So you're basically marking specific intervals in your code to say, I'm going to execute some work here, and I want you to track this work. And then once you visualize it, you can actually kind of get this graph where you say, well, I was processing a data item 1, data item 2, and then data item 4 for some reason took a bit longer than all the other stuff. And because this is using Chrome Tracing, this is a pretty low-level look at what's happening in a browser. You also get insight into things like, what was the V8 function that was being executed, or when did the GC happen, or what was the rendering thread doing at this time as well. So there's a lot of information hidden in there, and it can be a little bit daunting to start the first time you open Chrome Tracing. So if you're not familiar with it, I recommend that you check out the video, where we talk about some specific tips for how to navigate Chrome Tracing. It's not exactly the most user-friendly UI. I'll give you that. But we're working on it. Of course, garbage also happens, right? So we're running JavaScript code. We're creating dominoes. We're creating other things. We're allocating objects. Sometimes we basically need to pause and just collect the garbage. And garbage is OK. That's fine. But sometimes it is a bottleneck. If you're running, for example, if you're building a game, even a pause of 20 milliseconds for collecting garbage means that you've dropped a frame of animation, and that will result in not the best experience for the user. So Chrome also provides good tools to track this down. So if you go into the timeline, same thing. You record a trace. You start interacting with your application. You hit record.  What we will show you is the growth of the allocated memory and also how many event listeners or dominoes you have allocated in your page. And then, of course, you can tie that back to like, I was doing this specific action. The number of dominoes has increased, and it did not go down after that. So you can look at this graph here and say, OK. Well, you know, clearly I'm leaking memory. We also provide some useful tools to identify differences between different stages of your application. So for example, you want to start playing a game. You've done certain actions. How do you know what the difference is? So let's actually take a look here. So this is just an example in our documentation code. And what it's doing is it's a very simple example, a cute example of it's just going to create a whole bunch of objects. So let me open DevTools. I'm going to go into Timeline or Profiles rather. Loop. Let's try that again. So Profiles, I'm going to take the heap snapshot. So I haven't noticed that I haven't done anything on a page. It's kind of like my baseline. I just loaded a page. So I'm going to take a snapshot of everything that's in memory right now. Then, it's taking a little while, it's a big heap. And at this point, I'm going to click this Action button. And I guess I have a few things enabled here that I'll just disable for now. So I'm going to click the Action button. So this is just an example. Nothing really happens, but what's happening in the background is I'm running this JavaScript code, which just generates a whole bunch of objects. And then it leads a whole bunch of objects. So now I've done something on my application. I'm going to go back and I'm going to take another snapshot. And once again, it's going to run through and gather all the data.


What's up guys Michael we were Jaspies and we got a little late-night push had a little bit of help We're giving away two free spots, but 2023 flawless collegiate one box pick your team. It's gonna be from a fresh case, but this is just the R&B We're giving away two free spots like I said here is Here it is here all the eight people or eight spots that we sold Alan has four James Eric Mark and Jared Thank you everybody top two names get a free spot in the R&B Let's roll the dice two and a three five times one two three four five Top two names with the free spots mark and Eric getting free spots Let me pop you guys into my list here and you get a little hat Tells me you got that spot for free All right, let's pop them in here Updated with the free spots got the numbers. Let's roll another dice Six and a four ten times ten times for the names and numbers two three four right four five six seven eight nine and Ten you got Jared down to Alan remember guys all redemptions go to spot zero, but I don't think there's any redemptions Ten times again for the numbers here. We go one two three four five six seven eight nine and ten Ten times there three down to eight Three down to eight will match them up make it a little bigger Clean it up All right Jared with three mark with five Alan with five and one Eric's free spot got him spot six And he also has four Alan was seven marks free spot got him spot zero James with two and Alan with nine Here it is guys. Thank you again. Next video will be the break So, thank you to everyone who got this or and be filled and see you guys in just a minute. Bye guys


What's up everybody? I wanted to make a quick video because I get asked a lot what the plan is for the offseason and I know we're not in the offseason yet and I will be making videos about the World Series if anything fun or different or unique happens that warrants a breakdown I think is worthwhile. I'll be making those. I'll be covering the World Series the same way I cover everything on Twitter which is you know fun gifts, thoughts, overlays, videos that are just kind of quick hitters so if you don't follow on Twitter and you are watching the World Series and you want to hear all my thoughts and whatever I find interesting go follow on Twitter. That's where I do primarily everything anyway.  Fuck. Oh, FunSport Fridays are back. We did the arm wrestling last week. I have two scheduled for the future. Um, those are, I mean those are awesome if you see any. So throw the suggestions down. As for current breakdowns, the NHL, I did the one hockey fight and I said leave suggestions because I don't actively watch the NHL. So you guys poured in suggestions. That was awesome. I mean we're like two days in and I think I have five hockey videos that we have captured and I'm about to edit and record. So later today, there should be a ton that drop. Maybe I mean a ton, maybe like three breakdowns. That's cool. The NHL fans, uh, they respond, you guys responded awesomely to that first one.  As for, uh, and then there's past breakdowns. This is something everyone asked for nonstop during the season like, Hey, can you do old stuff like Papal Bond and Harper fighting or like even older stuff.  And there's endless of these. So I don't know with what regularity I'm going to post them, but I want to do at least a couple every single week. We made a second suggestion form for just past baseball breakdown. So go it's it's underneath. It's going to be underneath every video until the season starts again. And I just do current baseball, but in the off season request them. And there's so many out there. So please request them. And then if we can find the footage of them and I think it's worthwhile, then I'll do it. I'm actually interested to like deep dive into some of those as well and try to read like old school lips. I think they use probably different vernacular and stuff. We're not going to find a bunch of let's goes from 1980 videos. Yeah, dude, like Chris Chambers running around the bases and knocking fans out. That's probably a fun one. Yeah, there's a lot of fun to be had there. So current breakdowns, I'll try to do NHL, NFL college, I just need suggestions really. I just you guys are my eyes and ears. And if you see something that's weird and has like a beginning, middle and end, because sometimes people just send a straight up highlight. And those are hard because there's not really a storyline. There's not like crowd reaction, you know, it needs to it needs to be able to be a story in my opinion, not just watch this play. So that's the plan for breakdowns. I also want to do some breakdowns. You know how I did like the tipping of the pitches and some more like overarching like themes of baseball kind of one that I have is how pitchers who have a no hitter going or a perfect game as soon as they let up that first hit, the valve just opens and like explodes and or the one I was trying to do where how baseball fans hold their breath when the pitcher has to throw the ball to second or first base because pitchers can't throw non baseball fans probably like wait what pitchers can't throw to the bases and it's like yeah, for some reason. So those are another option for little breakdowns in the off season. And then there's we do tons of stuff. I don't think the YouTube crowd realizes everything we do. We have 10 plus podcasts in the network. So if you're a New York Knicks fan, Jake and the Knicks group, they just started that. They're diving into that season talking Knicks. If you're a New York Giants fan, we have talking Giants. If you like movies, we have six pack cinema. I just reviewed Joker. I was on that. And I just saw Zombieland two and I think we're going to review that. And there's just weekly episodes about headlines.  So just like headlines, Hollywood headlines, there's an episode of that. Last from the past is one of my favorite podcasts we do. And the new season is coming November 2 drops every Tuesday. That's a history comedy podcast. And this first season is tailored to our new fan base. I'll say that we're really excited about it. We got a team of producers and researchers that are helping build episodes. And basically, I like history and Jake is kind of new to it all. And we just kind of read a story and riff on it. There's six seasons. So if you ever have our board at work, there's last from the past. John Boy and Jake Radio was a daily show we did all last off season. And covering like just the biggest sports news and then weird, weird news in the world. And I miss doing that so much. But we when we started talking baseball, we kind of just ran out of time in the day. Let's see. Oh, there's a show called Talking Songs that has been on hiatus for a while. I really like music, but I like slow sad music. And I like getting high and talking about music. And that's what that show was doesn't have the biggest following but it's kind of like just like my therapy. So if you like that kind of music, you can check that out. And with Talking Baseball and Talking Yanks, they'll stay active off season those podcasts. And we're hoping to get a lot of guests like and and have people come talk to us and do interviews and we'll be at winter meetings like we were last year, covering whatever's happening and interviewing people and just being around it. When spring training comes around, we'll go there.  As always, if you're interested in any of that, go check it out. If you just like the breakdown videos, kindly try something else out. We do a lot more than just breakdown videos. But I know the YouTube crowd kind of just likes those, which is awesome. Which is cool. They'll be coming. Like I said, after I post this, I just want to post a little what's going on.  So did I miss anything, Bill? I think that's all. So thanks for everything. We appreciate it. You guys are the reason that this has blown up and this works. And everything we're going to get to do in the future is because of how great this year was, which kind of rides on you guys. So thanks for sharing. Thanks for being part of it all. Thanks for enjoying and thanks for watching. I got to get to work. I'll see you later.


Hey guys, how are you? We are gonna work with some watercolors today As of filming this, I don't know yet what I'm gonna call the video series We're gonna start working with watercolors again here on YouTube But I suppose if you're watching this the name is in the title. So there you go I'm gonna give limited instruction here on YouTube, but there'll be more detailed instruction over on patreon So if you are watching this on YouTube and you'd like to know more details about what I'm doing and why I'm doing it and Get a copy of the inspiration photo. I'm using for this painting. All of that will be over on patreon So it's $2 a month. It's not expensive But there you have it I don't make sure my phone doesn't turn off Over here because I would not be helpful Um, okay, so there we have it. This is a photo. I took the other night on a walk when the moon was shining very brightly It's cloudy and stormy out. It's actually gonna snow soon. I do live in Oregon so we're gonna use that as inspiration and I am going to paint something on my page now I did tape off the edges so that I could get something more like this than I did last time We did a watercolor page here for my creative year I like the idea of the for right now of having the sharp edges So we're gonna do that again. So I use some painter's tape to tape off the edges I am going to get to painting and for those of you on YouTube I'll be fast-forwarding through the process and I'll be back at the end It's that is my process as always that you know, I start as you saw in the sped up video I start with my lighter colors and work my way darker. I as I said, I'm trying hard to Take this photo, which I didn't retouch but is Because it was a darker gray night It came out naturally in black and white now you could take a photo that you've taken and make it black and white with a photo app There's a lot of them out there And use this for inspiration for shape and composition But use warm and cool colors to create my painting, which is what I did here I think pretty successfully. I'm pretty happy with it. I hope that You got some inspiration out of watching the video about what you can do with watercolors as you know If you don't know start light work your way darker Try to save your light or white space And you can really layer the colors on top of each other because for the most part your watercolors are going to be Transparent and you'll really be able to see the other marks and the other colors through them It's always a good idea to do a color key and some swatches and really play Get us something like a journal like this and play an experiment with your paints that you know what they're going to do What you can and can't do with them. Anyway, that being said, I hope that you enjoyed the video Don't forget to like share and subscribe if you'd like to support the free content here on YouTube or see the full video Tutorial you can do that over on patreon It's only $2 a month if you don't want to do that You can definitely support the content in a lot of other ways including shopping in my Etsy shop Putting money in my PayPal tip jar Using my Amazon affiliate link and among other things there's links for all of that in the description below don't forget to leave any questions comments or concerns down below and That's it. Go out and have a great day. Play with your paints Play with your watercolors have some fun and yeah, go out and have a great day Do something nice for yourself because you deserve it. I'll see you later. Bye guys


In this section, I will shortly present basic information about scheduler within 3-year task. We are using operating systems to manage multiple tasks, many applications within our code. We can call it multitasking. Having one core, we can execute only one task at the moment, so we need some algorithm to manage it and to switch between the tasks. This is the main role of the scheduler. Usually, schedulers can work within cooperative or pre-emptive configuration. Let's start from cooperative multitasking. It requires cooperation of all of the tasks. The context can be switched only when a running task goes to blocked state, for example by call of OS-Delay function, or it goes to ready state, for example by call of OS-Treat yield function, or is pulled into suspend mode by the system or other task. Tasks are not preempted with higher priority tasks. There is no time slice preemption as well. To activate this mode of multitasking, it is needed to define the config use preemption and set it to 0 within 3R2S.h file. The next configuration is a preemptive one. It is a default within 3R2S. Within this configuration, tasks with the same priority share CPU time. Context can be switched when the task slice has passed. Task with higher priority has come. Task goes to blocked state by calling OS-Delay function. Task goes to ready state, for example by call OS-Treat yield function. And to activate this mode, it is needed to set to 1 config use preemption constant within 3R2S.h file. We will use this configuration within our examples during this session. Cooperative with preemption by interrupt multitasking. It is a combination of both cooperative and preemption multitasking modes. In this case, interrupts are used to trigger context switch. It is in fact a preemption system without time slice. To activate it, we need to set to 0 config use preemption within 3R2S.h file. Scheduling. The scheduler is an algorithm determining which task should be executed. As you remember, only one task can be executed at one time if we are considering the single-corm microcontroller like STM32 devices, at least most of them. Common point between schedulers is that they distinguish between the task being ready to be executed, so in ready state. And those being blocked or suspended are not taken into the consideration. The main difference between schedulers is how they distribute the CPU time between the tasks in ready state. Within 3R2S, there is a round-robin mechanism implemented. Round-robin can be used with either preemptive or cooperative multitasking, depending on config use preemption constant set in 3R2S config.h file. It works well if response time is not an issue and all the task has the same priority. The possession of the CPU changes periodically after a predefined execution time called time slice is coming. This time slice is defined with the config tick rate Hertz, which is defined in 3R2S config.h file. We can play as well with the execution time and the number of the tasks to be executed by setting the proper priorities for the tasks. So, in fact, by limiting the number of the tasks which are in a ready state. We will try to touch this topic later in this presentation. Now let's have a look at main functions available for scheduler management within CMC's OS V2 API. To initialize the RTOS kernel, we need to execute OS kernel initialize function. If we are using heap5 memory, this is the place where the heap regions needs to be initialized by calling the vport define heap region function. Then the second function is the function which is giving us information about the kernel. So it's version and ID if set. The function is OS kernel get info. If you would like to have information about the current kernel state, we need to call OS kernel get state function. And as you can see, it can return the values like OS kernel running, OS kernel locked, OS kernel ready or OS kernel inactive. Next group of the functions. The most important one is the first one OS kernel start. It is starting the operating system. It cannot be executed from interrupt. What this function is doing? It is setting the kernel state to OS kernel running. And it is executing vtask start scheduler from freer to SAPI. The second function OS kernel lock is used to freeze the operating system by suspending all of the tasks. The third one OS kernel unlock, it is reversing this process by resuming all of the tasks. To check the current lock state of the kernel, we can use OS kernel restore lock function. At the end, let's have a look on some supportive APA functions on scheduler. To get the RTOS kernel tick frequency, we should use OS kernel get tick frequency function. To get free RTOS kernel system timer count, we need to call OS kernel get system timer count function. And to get the free RTOS kernel system timer frequency, so cystic frequency, we need to call OS kernel cystic. Please have a look that all of those functions can be called as well from the user code and from the interrupt. Here in the table, we can see the comparison among different APIs concerning function on the free RTOS scheduler. In fact, CMC's OS APIs are calling functions from free RTOS API, what you can verify within code inspection of your application. As an example, OS kernel start is in fact calling vtask start scheduler from freer to SAPI, so original one. OS kernel lock is calling vtask suspend all, so suspending all of the tasks. OS kernel unlock is calling xtask resume all function from freer to SAPI. As you can see, CMC's OS API v2, which we are currently using within this training, is much more complete than the previous one, which has not all of the functions implemented. Thank you for watching this video.


In 1837, the first settlement of Madison was set up and named after former President of the United States, James Madison. Soon after the first settlers built their homes, people from all across the country began flocking here. However, long before the American settlers came to the region, Native Americans of the Ho-Chunk tribe called Wisconsin and the area of Madison their home. They knew this land as Techeperra, land of the four lakes, and lived in the areas around Lake Mandoda, Lake Manana, Lake Kaganza, and Lake Y Bisa. Still today, this area is popular for outdoor activities. Famous man-made landmarks, such as the Wisconsin State Capitol, Manana Terrace, First Unitarian Society Meeting House and Memorial Union are also famous sites visited by people from all across the nation. Wisconsin became a federal state of the U.S. in 1848. At the time, Madison's population was only around 620. After the University of Wisconsin was opened, however, the population quickly grew. Due to the success of the university and the connection to the railway system, Madison could count a population of over 6,800 by 1856. Not only Americans settled here, but also a large group of Germans, Norwegians, and Irish came looking for fortune and prosperity. Still today, Madison has a diverse population and is a major educational and commercial hub. The four lakes surrounding Madison cover an area of over 15,000 acres, so it is no wonder that they are a major destination for watersports of all kinds, including water skiing, swimming, and fishing. USA Today ranked Madison among the best cycling towns in the United States. Its premier biking and hiking trails cover an area of over 200 miles and are the perfect destination for leisure activities. Besides the natural beauty of the city, Madison also has an artistic soul. People from far and near enjoy productions at the Ford Theatre Company or stand in at the Overture Center for the Arts. If you are a museum lover, you must also check out the Museum Mile, stretching all the way from the Capitol Building to the University of Wisconsin. With so much to offer, it is not hard to see why Madison is a premier destination for TEFL and TESOL training. If you are looking for a place rich in nature and the arts, Madison should be on top of your list. The city offers some of the best outdoor activities and selection of museums and galleries in the country. If you join our TEFL-TESOL Training Center in Madison, you will receive the very best training. Our teacher trainers guide you along the way and even prepare you for interviews and your first job as an ESL teacher. Upon completion of the course, you really can start your career as an English teacher all over the world. So when are you coming to Madison to start your TEFL-TESOL career?