I plan to do some things regarding VPNs. One of our, again, our first workshop, we used a VPN for a different form of privacy where instead of visiting a website direct, you visit that website via some VPN server. And the VPN has different purposes. There's some instructions on the course website to set up the VPN server on your VPS. We will not try them right now. We'll do a quick solution, and then do a few other things on the server just to cut down on time. First, we'll use, whoa. First, I'm in my browser on my laptop, your browser on your computer. Find your IP address with respect to your browser, your computer. So maybe go to a website which tells you your IP address. What is my IP? There are many. Why is it so slow? So in your browser, this is not about your server at the moment, okay? Go to a website that tells you what your IP address is and it detects me as <IP_ADDRESS>.  This one is whatismyipaddress.com. See what it identifies you as. It's the same. From the perspective of this website, which is somewhere out on the internet, when someone sent a packet requesting the webpage, the source address was this one. And we are all the same. Well, why is that? Because inside SIT, we have this thing called NAT, Network Address Translation, which even though my laptop, your computers are all different internal IP addresses, they all get mapped to the one public IP address, this one. So when it goes out of SIT, the public IP address is actually this one. So when it goes to the website, the website thinks it came from this address, which is identified as Thomas Art University. So the website can track us to Thomas Art, but they can't directly track it to my laptop. But if maybe some government went to the website and says, who accessed this website at this day? The website owner would know it went to Thomas Art here, and then the government would come to our university and tell us the logs of who accessed or who used this IP address at this time of the day, and then they'll trace it back to my computer. So it's not hard for someone to trace who accessed this website. It requires a few steps. So the website identifies us. Let's use a VPN server, where when I access this website, I do it via another server, and the other server will be our VPS, our droplet. There are different ways to do a VPN, and there's instructions on the website for doing openVPN, PPTP, which are probably the best. But the fastest for us is using secure shell. Open up a terminal on your computer. You're not logged into your VPS. You're just on your computer. And SSH minus ND, choose a port number, and then the IP address of your... So you will not see this on the screen on yours. You have to copy up here. So in a fresh terminal, SSH minus ND, choose a port number. I choose 9999. You can do the same. It's okay. And then the IP address of your VPS. Maybe get it from the email or from before. I can't remember mine. It's here. The IP address, not the URL. This is going to create a secure shell connection from my laptop to my VPS. Normally, we use secure shell to log in and then run commands. But this minus ND 9999 says, do something different. It's going to set up a connection from my laptop to this VPS. And then, from my laptop's perspective, it's going to listen to other applications on this port 9999. It's going to set up an actor's a proxy. Let's run it and see how we use it. Do we need the login user? Yes, we do. Well done. Why didn't you tell me before I pressed enter? Okay, correct. I did it wrong. Let's do it again. We need to specify who we log in as. Yours will be different. Secure shell into this IP address as this user, Steve, and use this special option, minus ND 9999. Yours doesn't have to be the same number there, but it doesn't hurt if it is. Yes, I want to connect and Steve's password on the VPS or your password on your VPS. And there should be no feedback. It should sit there doing nothing like this. If there's some feedback after that, something went wrong. So now my laptop is connected to the server, a secure connection. But what it's doing on my end point is that the secure shell software is listening for other applications on my computer who want to send data. Let's set up another application to send data via this secure shell connection. Open Firefox. In Firefox, you go to your, well, preferences, edit preferences. It works on other browsers, but let's follow on Firefox preferences. I've already got it open. In the Advanced tab on the far right, under the Advanced button, there's a Network tab. And Connection. Configure how Firefox connects to the Internet. Click Settings. It sets up a proxy. Should be no proxy. We'll set it to manual proxy. And I've set it before. Proxy configuration and then look for Sox host. The others should be clear. Sox host set it to local host, meaning your computer. And the port, the same one you used in the secure shell command line. 9999 in my case. And these options, I think Sox version 5, remote DNS is important as well. Yep. You don't have this option. Ah, sorry, don't worry that. We'll tell you how to do that later. Sorry, mine's a different version of Firefox than yours. If you don't have remote DNS, don't worry, you'll survive. Any other questions? It is important, the remote DNS, but we can set it some other way. Sox host, local host, port 9999. Okay, what this does is tells Firefox anything that it sends, send to the local computer to port 9999. And the previous step, we set up secure shell to listen on port 9999. Is that enough? And secure shell that will then send that data to our VPS. And our VPS will then send it out to the real destination. The idea is that, if you can see this, is that on my computer, Firefox will send to the secure shell software. The secure shell software sends on a secure connection across the internet to my VPS, which will then send it out to the real website. So this is the VPS, your server, this is your computer, you. Instead of Firefox sending across the internet to the real website, Firefox sends to SSH on your computer, and then sends it via a secure connection to your VPS, which then sends it out to the internet. So this part is all encrypted. Let's see if it works. Press OK. Close. And now visit, let's say, refresh here. Visit what is my IP address. Look at your IP address. And look where you are. You're in Singapore now. Or the website thinks you're from Singapore. So this is a simple form of a VPN using secure shell. You haven't given your password for a secure shell. Type your password there. Try again. So two steps. First, start the secure shell client in a special mode that it connects to the server and then listens on this port 9999. You don't need to use this number. You can use other ports. That creates a secure connection between you and your VPS. Then tell your browser to send everything via this secure connection. Use a proxy. The result, two results. The web server that receives your data identifies you as the VPS. Note that this IP address is the IP address of my VPS. Yours will be the IP address of your VPS. So the web server doesn't identify you being from Tamasat and now identifies you being from Singapore. So there's some form of privacy. The second benefit here is that the data between you and your VPS is encrypted. So if there was somewhere on that path that you wanted to hide your data from, then you've done so in this case.  That is everything I'm sending from my computer now is encrypted as it goes out of SIT. No one inside SIT can see that data. Did it work? Still refusing connections? Yours worked? So let me see.


The 18th chapter in the book of Deuteronomy and Devarim speaks about a prophet that God would send to the Jewish people. And the passage is open-ended enough that it doesn't identify who this prophet is. And so the $64,000 question is, who is it speaking about? And because it's such an open door, it shouldn't surprise anyone that over the course of history, Christianity insisted that this prophet that God was going to send was Jesus of Nazareth. Islam has claimed that the prophet that is being spoken of here in Deuteronomy chapter 18 is the prophet Muhammad, in their opinion. And so what we're going to try to understand is based upon the text of the Bible itself, do we have any clues as to who this passage is referring to where it says, a prophet from your brethren like me shall God establish for you, that's in the 18th chapter of Deuteronomy verse 15. One of the principles of understanding the Bible, actually of understanding any book, is to be sensitive to context. They say in real estate that the major thing to pay attention to in real estate is location, location, location. In studying the Bible, what's critical is context, context, context. Now there are two things I'd like to point out. Number one is the general context of the book of Deuteronomy of Dvarim. This is the fifth book of the five books of Moses. And as we know, this is really, the entire book is a speech, is really a message that Moses is giving to the Jewish people just prior to their entering the land of Israel. We know that they left Egypt and that they ended up spending 40 years wandering in the desert, but the goal of leaving Egypt was to come to the promised land. And now they are essentially at the foot of coming into the promised land, they're about to enter the land of Israel. And the entire book of Deuteronomy is basically the goodbye speech of Moses.  Now, the 18th chapter of Deuteronomy will zero in even more in terms of context. One of the subtexts, one of the themes that is really working behind the scenes when we get to the book of Deuteronomy is a crisis that the Jewish people experienced 40 years earlier. We know that 40 years earlier, when Moses went to the top of Mount Sinai to receive the Torah, so we know that the people expected him to return at a certain time. And we know that Moses was delayed. He didn't come down exactly when the people expected him. And the people unfortunately freaked out. They got very, very nervous. They were very upset. Who was going to lead us? They became very dependent on Moses. And we know the tragic consequences of their panic was to build a golden calf that would take the place of Moses. Now, that event was a catastrophe in Jewish history. And so Moses now in the book of Deuteronomy understands he is not going to be accompanying the Jewish people into the land of Israel. God had told him, you're not going to enter the land. And so Moses now understands the people are about to enter the land of Israel. And he, Moses, is not going to go with them. So now they're going to find themselves in the exact same situation they were in 40 years earlier. They're going to be left without Moses. What is going to happen? And so the book of Deuteronomy basically is preparing them in general for entry into the land. But the 18th chapter, the one we're looking at now really zeros in on this question of what are they going to do in the absence of Moses? Now, immediately before verse 15, right before this promise of a prophet that God will send, Moses warns the Jewish people and says that you should not turn and learn from the pagan and occult practices of the nations who are living in the land that you're about to enter. Moses warns the Jewish people that the people living in Canaan practice astrology and sorcery and divination and reading signs and omens and different kind of charms. He goes through a whole list of occult practices of divination, ways of discerning the future. And so really what Moses is thinking about here is what are the people going to do when they don't know what to do? If Moses is not around anymore, they might be led to feel that they have to turn to these occult practices because the pagan nations have ways of knowing what to do. They have these occult practices that they turn to to help them know how to proceed in life. And Moses was concerned that in his absence, they would turn to these practices. And so immediately Moses says, do not learn from these practices, do not do these practices. He then goes on to say, God is gonna raise up a prophet for you. So it's clear from the context that this prophet that Moses is speaking about in Deuteronomy 18 is not Jesus or Muhammad who come hundreds and hundreds and hundreds of years later. It's very clear from the context it's speaking about the prophet who would basically be filling in after Moses, after Moses is no longer gonna be leading them. And we know from scripture that's the prophet Joshua. So the immediate understanding, the clear understanding contextually is that this prophet being spoken of in Deuteronomy chapter 18 is the prophet Joshua. And again, because he is the one that's going to be filling in after Moses departs and is no longer leading the people. And obviously, by extension, a secondary meaning is that it really is applying to any prophet who will be coming after Joshua. Really, it's not limited to Joshua. Joshua is the primary subject of this passage, but by extension, obviously, it would refer to all the prophets who would be coming after Joshua as well.


Would you like to optimize your motor-based product to save energy consumption and enhance robustness, while at the same time saving on bomb costs? Well, look no further! Let me tell you about our unique algorithm capable of attaining sensor-like performances, but without any sensors. Now, sensorless field-oriented control, or FOC, offers benefits both in cost and quality, while removing sensors and wiring. Two FOC algorithms are available right now, the one based on the Lundberger State Observer introduced in 2008 and our newly developed one, which combines what we call the S High Sensivity Observer, or HASO, and the STM32 Zest. They provide improvements at low speed and even at zero speed, while still deploying full torque. In fact, this is a very innovative way to start the motor at full torque, which is a significant challenge, and all of this without any sensors. Now, let's have a look at the two demonstrations that we have here. Both are showing the control of a motor in different conditions. Here is a low-power brushless DC motor running on HASO, and you can see that the startup time is really short. Also, switching direction is loud. The second demonstration enables a comparison of several motor control algorithms under braking conditions. Braking is performed by another brushless DC motor, and the UI enables you to apply a resistive torque to the motor and the test. You can choose the algorithms you want to benchmark, to make comparison on current consumption, startup time, and even recovery after mechanical stall. In our demo, the HASO and Zest algorithms are running on the STM32 G4 and need around 70 kilobytes to run, as well as a minimum of two independent ADC and a floating point unit, that all of this are native to the Codex M4, which means cost-wise, this is great for your next motor control application. Now, I'd like to give you more insight on what we've developed. So, when controlling a synchronous motor in FOC, sensors may typically be used to determine the position of the rotor to improve efficiency. However, dedicated software called Observer algorithms can estimate the position through computation, which then enables us to go sensorless. Now, although these observers work well at high speed, they do struggle at low and zero speed. This is why we decided to develop the High Sensivity Observer and the STM32 Zest, to bring the first sensorless solution, which allows control at zero speed, while still maintaining full torque. Perfect for a flying start! The High Sensivity Observer improves sensorless control by reaching ever lower speeds and even switching direction. You can also add the STM32 Zest on top of the HAso, which is the first solution capable of providing full torque at zero speed for any kind of synchronous motor. Both the STM32 Zest and HAso are pure software algorithms, which means that no additional active components are required, and they run on a simple MCU such as the STM32 G4. Meaning, you are reducing bomb costs and increasing the robustness of the PCB. For more information, check out our STM32 Zest page.


What are the terms, what is the meaning of Houdini? Yes, correct, that's correct. So, a magician who has the art to escape. So, escaping means not to run away, just to break the loop and come out. So, Houdini, with the CSS Houdini, we would try to do the same things. We will break the chain process and we'll come out and we'll apply some magic. So, moving to the next. So, what is CSS Houdini? So, CSS Houdini is a site of APIs using which we can hook the browser CSS engine and we can register our own property with it. So, isn't it cool thing that the property which we would register that has some meaning and using, we can use that property as our own property in the CSS. So, which are those APIs which are available with the CSS Houdini and can be targeted? Type DOM API, properties and values API, paint API, layout API, animation API, parser API and front metrics API. So, these are the seven core APIs which are available and which can be accessible with the JavaScript. So, before jumping all together to the CSS Houdini, before that we should understand that how the CSS works, how the rendering pipeline works. So, I think Sarkit will explain you that how that CSS works and rendering pipeline works. Over to you, Sarkit. Thank you very much. Hello there. So, yeah, we'll be talking about how basically when we load our page, how CSS applies to node and how we see, like what we see on the screen, how it is being processed or made by the browser. So, basically when a link is accessed, browser goes and loads the HTML through internet and it parses it, creates a DOM tree and then it parses the CSS with it and creates a CSS DOM tree. Now, CSS DOM, it holds all the styling of those DOM nodes which is there in the DOM and now we have a few phases, few steps, basically layering, compositing and painting so that everything is visible on the screen. Now, here we can see how Houdini helps us in this layout engine, CSS layout engine. What it does, it gives us APIs to hook into CSS engine to create these properties so that we can add more functionalities at using those APIs and hook into this CSS engine itself. So, and now you might be thinking, why CSS is Houdini? Because nowadays, everyone of us know that there are JS polyfills which would allow us to just go and create that functionality. For example, IA doesn't have that rounded borders. Now if we want that functionality, we can just create a polyfill out of it and then apply that on our browser if our client demands it. But why not to use polyfills and use CSS Houdini is what I'm like. So, to address that, I'll go back to our rendering pipeline where once a parser is done and DOM trees are made, we have this layout, paint and composite phases these steps happen and then things appear on the screen. Now, this is the time when our JS polyfills will be called and it will again run the JS and then create that functionality and then we'll have to rerun, re-go these steps to basically see that changes in our browser which we want through JS polyfills. So, you see the loop happens twice to just bring in that one functionality. That's what we don't want because it definitely looks like a hack and definitely it's not very performant. Now, when we use CSS Houdini APIs, it will allow us to hook at the same CSS ARM and basically CSS engine place and it will allow us to create that property and it will just let us to run this step only once, not twice as in case of. So, this is one use case, like this is one advantage of CSS Houdini APIs. Now, so, will it talk more about the other challenges as a front-end developer which we face? So, yeah. So, thanks, Arcad. So, nothing is impossible with JS. So, as Arcad said that we can write JS polyfills and we can achieve whatever we want, but there are being a front-end developer. How many of you are front-end developer? I would like to know first of all that. That's great. So, being a front-end developer, there are certain challenges which I see to apply. So, one of the challenges is chronic gradient. So, there is a CSS property to apply the chronic gradient, but it is not very well supported by the browsers, much other browsers, like I don't think so that it has been supported by Mozilla and all. And apart from that, checkbox and radio buttons. So, to override the traditional checkbox and radio buttons, it is really challenging, but more over border shapes. So, traditionally we can apply the border radius to the container, but what if we want to apply an invert border radius or let's say a scoop of scoop border radius, or we want to cut the edge from that container. So, such kind of border properties and border shapes are not available. And this one of the useful thing is tooltip. That tooltip functionality, traditionally what we do, we create, we use that pseudo elements before and after and using a border shape, we create a tooltip. But using CSS Houdini, the solution of these four challenges is a paint API. So, using a paint API, we can overcome this and in our demo, I'll show you some of the things. Apart from that, if you talk about in terms of layout, then one of the challenge is mosaic layout. So, that challenge also can be overcome using a layout API. So, what is mosaic layout? So, mosaic layout is dividing your container in a column and based on the height of the elements, it will adjust in each column. So, using the layout API, we can easily create a mosaic layout and animated gradient. How many of you have tried to animate the gradient on hover? Was it working smoothly? No. So, I'll just quickly show you that. How can we do that? And with the CSS Houdini, that is actually achievable. So, I'll give you, I will show that to traditional way. And so first, what I did, I just applied the linear gradient with yellow and dark blue color. And on hover, I'm trying to override it with, is code is visible? Yeah. Okay. Yeah, that's great. So, and on hover, I'm trying to change the color linear gradient of that yellow to orange. And when I'm trying to explain it, even I have mentioned the transition property as well. Though the color is not getting changed with the transition effect. Okay. Now, someone would might think that, if you think in terms of JS like thing, our jQuery, then we can define our variable. So, but we have defined our CSS variables here and try to override that with the secondary variable. And if we try to do that as well, it won't work. So, because browser understands the property, not the value. So, what we can do to achieve this? So, we can register the property. So, the now color primary would become a property with the syntax of color. And where we can define the syntax of the color. So, currently I have defined a color syntax. There are other multiple syntaxes available like image, percentage, and a number. So, there are more available with the properties and values API. Right now I'm not mentioning any color over here. I'll just keep it transparent. And I'll try to override it from the CSS. So, I'll return. So, if I'll try to override this. So, here you can see the animation. So, the animation gradient can be possible with this. So, this is the beauty of CSS ODB. Guys, isn't it cool thing? And so now the property which I've registered, it has some meaning. So, it has a meaning that this is the primary color and this is going to be changed. But before jumping to the next API, that is type of API, I would explain that what is the difference between properties and values API and a type of API. So, properties and values API are not strong type. So, let's say what is strong type. So, if I define the initial value over here and I'm just making any mistake over here. I'm not mentioning any color. Though the CSS won't stop working, it will work. So, this is not strongly typed check, but what happened with the typed home API? So, I personally call this typed home API as a typed awesome API. So, what happened when we write CSS code, what happened at the time of passing? It had the string based rejects happen. It will pass your code and check that whether it is a class then it should be a dot and the string name and the open curly basis property name with colon and values. So, it looks little bit weird and awkward to us. So, when we use the typed home API and when we try to fetch the value of that particular element using the typed home API we'll get the structured data output and the computed values. So, not just because we are getting the structured data and computed values when we target in a particular element that's because the typed home API is good but the real use is it's a strongly typed. And second, I have a screenshot of a demo. So, this is the demo. So, what I've done here. So, initially I've kept all the box opacity 2.2 and at the bottom I've provided two buttons. So, without typed home and with typed home on clicking on the each button it will increase the opacity by 0.2, sorry. So, here you can see that when I'm trying to increase the opacity. So, you can see the console messages showing me the performance time. So, that is 0.8 to 9, 9 milliseconds. And when we try to execute the same thing with the typed home the performance time is 0.5. And believe me right now it's very, difference is very less but it's almost half but it really gives you the very good results when we use with the typed home API. So, this is the major advantage of using the typed home API. And so, there are other APIs like paint API, layout API and animation API. But custom properties and typed home APIs are based on the strong type and loosely type. But the paint API, layout API, and animation API are the worklets. So, before jumping to those APIs, we should understand that what is the difference between web workers, service workers and the worklets. And Sarked would explain you this difference.  Thank you for that. Yeah, so, till now we talked about the two concepts of typed home and custom creating custom properties. Now we are getting into more advance and basically API which would talk about the browser concept and where we hook into CSS engine. Now, so before going there I'll talk about these web workers and worklets. So, to understand that we all are like web developers and we know that our browsers are single threaded, main application with a single threaded, single thread, which carries on all main activities, right? And then workers are something which will have, which will allow or to run more heavy performance, heavy tasks on a separate thread rather than on a main thread. And then worklets are more specialized workers. So, to visualize the scenario, I'll go and take an example of immigration, which we go through when we are traveling abroad. So, imagine that you have a counter with, you have a immigration area, only one counter is there. So, what will happen? Like huge line on, at a time only one person would be processed. So, everyone else has to wait till that background verification of that person happens and then he moves, then the second person comes. So, at a time only one person is entertained. But in second scenario where you have multiple counters for these immigration and so at a time as many counters are there, those many number of people can be handled, right? Basically, they can be processed and your processing like it becomes more faster, right? And now take an example of a counter, which like in European countries, you have European passports taken care separately and then you have non-European counters, which where we have specialized person for handling European passports and non-European passports. So, having these specialized persons, you have this process to be more faster, right? So, taking like coming back to our workers and worklets, workers are like the separate threads, which will carry out more like calculation more heavy tasks on a separate thread and once they're done, it will pass on the message to main thread, which is generally main thread is generally, we want to keep it non-blocking because user activities should not stop and it should carry on. And worklets are again, they are similar to workers but with a more specialized functionality. In CSS Houdini, we have worklets for animation API, animations for layouts for paint. So, these worklets are specified, like they have specific role of doing these functionalities and we use these APIs to hook into these processes and create our functionality like, so I'll go to layout API first, right? Here, layout API, it helps us to define our own custom display properties. Like, currently we have only a few defined display properties like block and line, flex, grid. So, now we have with Houdini's layout API, we'll have the power to define our own custom properties, custom layouts, which, as I was talking about, like having a masonry grid as a layout, so we can, instead of going to JS and defining that in a non-performance, it's very slow and it is not very performance and that's why we have a lot of jitteries in current scenario, but if we use, if we define that through this layout API, that would be more performant and more easier, like even easier to define as well. So, and you can create your own spec, like flex and grid, or you can define your own spec. So, I'll talk more about what layout API has, like layout API, when we define our own custom layout API, custom layout, it is applied to a particular element, say like display custom, display this layout and then custom name. So, when we do it to a particular element, it becomes a parent element and then that parent element is responsible to hold that all children inside it. You can imagine flex, like flex is applied, display flex is applied on a parent and then you have child elements as well and we have some child properties as well, which goes on child, so similarly. So, parent layout holds algorithm for complete parent and then it has information like layout constraints and layout edges. Layout edges is collective information of the parent for scroll, borders and padding, basically outer region of that parent and then after layout edges, we are left with the layout constraint, which is basically holding the, is the remaining space which holds child elements, right?  So, this layout child holds all CSS properties and style map format and the second information is layout fragment, which holds your information about the intrinsic size of that element, child. And it has again two information, max content size and min content size, basically giving the complete information about the size of the child. So, when we define, we have, we have one, we define registered with the name of sample layout and then there is a class which holds all functions, like all information about child properties, intrinsic size, layout and constraint. We'll talk about it later in more detail. And so, once we define it, we register it in our main thread and in CSS, we call it like this display layout and then sample layout. So, it will apply that this sample layout onto our element which we are calling, right? So, this is how layout API works. Now, sorry, going to animation API. If I'm making you sleepy, bear with me for some time because, so this is all theory part and when we go to demo, it will be more interesting. You will see everything in action, right? So, with animation API, there are currently, there are few options, only few options which through which we can do animations in web. For example, we have CSS transition, we have CSS animations, we have web animation API, right? And so, these are the current solutions available for animation stores and the problem with these solutions is that they are stateless and time based. Basically, if you want to have any user interactivity and then, so basically all user interactivity will be just a trigger point. You can't define your animation based on the user activity, right? For example, if you have seen your mobile browsers, they have address bar. When you scroll down, it disappears and when you, in between when you try to scroll up, as soon as you try to scroll up, it will reappear, right? This is an example of user interaction based animation, right? It not only looks at the user interaction, like user activity of scroll, it also maintains which direction user is scrolling, like up or down, based on if it is up, it will show up, show up the address bar, if it is down, it will, because it understands that user needs to see more part of the page, so it will remove that part. So basically, this is something user, like not time-based, it's user activity-based animation, right? For example, if you see this animation, like see this video, you see, this pink block is being controlled by the scroll in that block, happening in the block, right? Now, if you want to create this kind of animation, currently we don't have a solution through existing animation, like whatever animation options we have. Now, Houdini gives us this power to create these kind of animation, right? And we'll see how it does it. So here we are, like for the same scroll, we are creating this animator, syncscroller, and registering a class for that, syncscroller animator. It basically looks at two properties, two things, input properties and output properties. Input properties are something you, it will watch if there is any change in there. And if it gets this information that there is some change in input properties, it will trigger this class, the functionality written in this class. So don't go under this complex, nothing like don't worry about this code. I'm just talking about, so only two things we need to care about is input properties and output properties. Input, we watch the change, and based on the change, we process something and make changes in output properties, which is applied in our CSS. So here we have mainscroller and alt-scroller, basically the video which we saw, the pink block was alt-scroller, and the mainscroller was the block where we had the scroll. So when user was scrolling, it took as input the placement of the scroll bar, and so this scroll type is watched, mainscroller is watched, and then it is being applied, the output is being applied on alt-scroller. So in our code, we were just matching the position of the scroller, and then we were applying the same thing on the pink line. Yeah, so this is how animation API works. I'll let, with it, talk about Paint API. Thanks, Sarkit. Are you guys with us? Seriously? Okay. So as Sarkit explained that, how the layout and animation API works, I would like to explain about the Paint API. So this is the, this way just we can create Paint API, each part of code means what should be written in the HTML, JS, and CSS. But before jumping into that, anyone can tell me that any element you know, which allows us to draw whatever we want on the HTML. Correct. So Paint API is as similar as the canvas. So what we need to do, we register our, we can register our Paint Worklet, with, we can invoke the name. So this would be the name, and this would be the class name. Which has some of the functionality written with the, that class. We include that register Paint in the class with the Paint Worklet add module, add module thing with the HTML. So what it will do, it will come, it will link with the main browser thread that register Paint has been written and it will link to the main browser thread. And whatever the name we have mentioned to that, whatever the name we have registered, so that will go with the CSS part with the background properties. So I'll show you the quick demo about this. So there is a one, so CSS Houdini Rocks, anyone heard about CSS Houdini Rocks website? Anyone is aware of? Okay, so CSS Houdini Rocks has created this tooltip using the CSS Houdini API Paint API. And I have just taken that code and I've tried to provide some of the support and I've extended it a little bit. So currently the tooltip is in the right side direction. So, and when we change in the position of that tooltip position variable, you can see that it's working, it's moving on a vertical side. So now let's see what I have done. So I have provided one of the variable that is a tooltip placement. So if I change it to top, if I just need to change the border, image slice property to 100% to top, you can see that it's automatically placed on the top. And here I don't have to worry about the tooltip position because if I now, if I change the tooltip position property, then it will automatically move on the horizontal direction. So what I've done, so from the code, we can see that similar, I've just taken the tooltip placement based on that I've taken the place, a value of that placement in the variable stored in the variable. And based on that placement value, I have created the switch case, which is drawing just a triangle. So this is the triangle which will be drawn on each of the side. And based on the position, it will take care of the scrolling part. So if it is on the left or right side, it will move vertically. If it is on top or bottom, it will move horizontally. So this is the one example of paint API. The second example I would like to share is a checkbox thing. So here is the traditional checkbox. So this is the by default checkbox provided by any browsers. But let's say instead of these tick marks, we would like to use any cross mark, then what we can do. So what I have done, so I have registered a paint work with the name of checkbox. I've used that here with the checkbox. So I'll show you each and everything with the use of checkbox. So right now we are not worrying about the edges and all. So this is just the color. So if we take care of cross mark, we will initially will create only cross in the checkbox. We'll just increase the size of it. So I will just create that cross marks. So it's starting from top left to top right and top right to top left. So I've created it. So now I will apply some transparent color. So here, now if we try to hover it, so it's applying, so it's working. When I check the checkbox, it's working fine. Now what if we want to provide some edges? So what if we want to add padding from all the side of this cross mark? So what we can do, we can include the edge variable. And we can call this variable inside our JS using the input properties. So here I have already done that. So here I'll just get that edge properties and using that edge properties, the little bit logic will be changed. So now if I try to refresh this, if I hover it, you would be able to see the padding from all the sides. So this is the beauty of Paint API. And as I said that this is very much similar to the Canvas related JS code. So it's very easy to understand as well. So moving back to our slides. So while working on CSS Houdini, there are certain things regarding which you need to be very much cautious that this is very much experimental right now. And to use CSS Houdini APIs and you want to make it work, you need to enable this Chrome flex Moreover, your website should be accessed with the local host or STTPS. And if we check the current Houdini state, so this is the current state of Houdini. So here you can see pass or API and font metrics, API are not well supported. And these are the browsers which has agreed that they will provide the support to CSS Houdini. And right now it is very much under development. It's very much experimental. And to, I personally believe that for any community, if anyone, any community needs to grow, then active participation is really required. So we should contribute this community. How many of you know or believe that this is the cool thing and we should definitely try? Please try it once, you will definitely. So there are references as well. And QD42 has started the initiative of supporting the CSS Houdini. And if you have guys who have any questions now, you can ask. If you don't have any questions, then I'll ask. Don't worry. What about something about to the CSS process or some of its compiles as well? Because is it possible that compiles or the CSS compiles doesn't compile or code because of custom property? So the code which has been written inside the JS is like a part of function. Okay, so while writing the code inside the function with the CSS preprocess like says and list, we can call, we can use the functions, we can define the functions there as well. So it would not be an issue with the CSS preprocesses. So even, so basically the purpose of CSS preprocesses is giving like compiling everything into CSS and browser reads CSS. And these APIs will directly talk to browser itself, browser engineers. So that doesn't have to do anything with the CSS preprocesses. Like everything would be compiled and it will be used. So if you can like CSS preprocesses definitely support root elements property, so it's exactly like that. Anything else? Yes. Can we go back to the slide? Which slide? This one. One thing about this, when, as we can see the Microsoft Edge code is like. Yeah, so I think about this and browser supporting this specs, so still the specs are in process of development. So basically for layout API version one has been already specced out and Chrome has already started implementing it. So once that all specs are defined and so the major thing to note here is that all browsers have agreed to like support this initiative and there is specific Houdini task force. People from all these browsers basically they have a team and they are constantly working on this. Yeah, my question was actually to, when it says that something is shipped, are we, do we think that this will be standard between browsers because one of the main purposes of Houdini is to have standardization. So if we would have one row of green and shipped, does that mean that it actually works the same in all browsers? All the browsers, correct. So, Do you answer me like maybe, then record it. Okay. Yeah, so once like this, this is basically is Houdini ready it, there is a site which manages agreement from all the browsers and once it supports, then only it comes here. So basically, yeah, so spec will, it has been agreed that spec will be followed by all browsers like to the point. So I think yeah, once they say that it is supported in here so it will be supported like nicely. And yeah, so still we have time for see in time. Like I think it would require like down the line one year, two years time would be there until we see everything green. Because this is definitely a huge shift in the way we do CSS and the way we currently style our websites. And yeah, so but this is definitely a future to how we write CSS. Can you explain the name Houdini where it comes from? Yeah, so Houdini means, so Houdini is also the name of the magician you might be knowing. And Houdini means to escape out of some chain, some loop. So currently, and to do that, so in like from coming out of the common chain you need to do some magic. And so this basically these all APIs enables us to create magic. So what we see in like currently the CSS is like we have some predefined properties and then we use it and then see the changes on the browser. So that's basically the magic. Now it is enabling us to create that magic, create those properties and see people do wow about that. So basically that's CSS for me. Yeah. So I think this is likely to raise any like what kind of security concerns? Yeah, so that's why the currently these APIs only work on STTPS and localhosts only. Like the similar, the same security concerns which we have with the service workers so that the same applies here as well. Aren't you worried that this will actually make the whole front end bit a lot more complex than what you because people will try to make their custom stuff to make something that should be really simple. That's what I'm seeing in my company, for example, if you have junior developers, they try a lot of different stuff that they've heard about to do something really simple like, I don't know, something with a background difference or a great user and SPG. And this to me seems like you're opening doors for like, yeah. So I like to answer this by Spiderman's statement like with power, you have responsibility. So that's, so yeah. Will be this like, because I really like the idea and I see like, there must be a big use case to use this kind of approach to fix maybe compatibility issues between browsers, like these kind of things you can get somehow with Microsoft Edge to do things that you're not doing by default if they really enable this feature, but. So now we don't need to worry about Microsoft Edge because now they are coming to WebKit. But anyways, we know that they'll also support these APIs and yeah, this enables us to a state where there is no browser monopoly sort of and we can't do anything to support our customers. Yeah. Do you have any idea how mobile browsers will support the APIs? So for example, on desktop, you have your normal checkpoints, you can style it, but then what happens on an app like what would be the plan there to recreate that styling? So eventually like now mobile browsers are not that separate from desktop browsers. They almost support everything. And now eventually it will be like all platform, all browsers would be supporting this. Yeah, and that's why, because this is something which will always have performance benefit on that. And mobile browsers will definitely want it because it makes the site more performant on mobile. Yeah. Where can we see the updates on the progress on this slide? So this is basically an iFrame loading from this. He says, who didn't he ready yet? He's a site. So this is the site. Actually we would have shown that. So this is the place where you can see the status of which API is being supported by which browser. Yeah. Could you give me a reason why you would use would you need to style the checkboxes instead of pseudo elements? So again, so styling checkboxes. Now we know that our designers create weird stuff and that is nothing. It is nowhere near to what we get from browsers. Right. And so what we do is we hide the main input element and then use before and after to bring in the image and then see with the property checked or unchecked. Like check property is there. Then we apply a different image and then when it is not checked, we apply a different image. So this is, and I think you would agree with us that this is bit hackish. Yeah. And also like when you, it fails when there is a validation. And yeah, we can do it like if you use directly displayed none to this input element, it will break when there is validation going on front end validation happening. So that's why we use visually hidden or clip it from being visible there. And that's why like that's how we bypass this and we use this validation. But using Houdini, it will not have to do all these of workarounds. We can directly hook into CSS engine and then we can just instead of that box, we can have our own image. And with the change of the property, it will have the other image which we want there. So that's why it enables us to directly use the main to be in for painting that box. That's why it is more cleaner way and more performance benefit is there. Yeah. I was just thinking, so I'm all right in thinking that you have to define JavaScript to add these rules into the CSS. Yeah. So doing a JavaScript by using this. Yeah. So does this force you to add like render blocking JavaScript and does that not much enough? No. So basically, yeah. On the main thread, we attach this, these worklets and these worklets only like these worklets only, they do the processing and then passing information to the main thread. So we just have to register these worklets. So these worklets again handle, they have a separate class to handle these like if you are doing animation, if you are doing layouting, if you are doing paint. So whatever worklet we are using, we just need to register those class to do the main thread and then rest of the thing is taken care in the background and nothing is render blocking. The whole purpose of having worklets is to not render block. So guys, we are running out of time a little bit. So you can contact us on the boot number 16 as well. We are here and our Twitter handles are socket underscore KMR and with it underscore 27. And please do provide your feedback regarding the session. How much, how much did you like, not like? So it will really help us. Thank you so much.


Allegheny County is fantastic. We have the tap and pour trail, we have the ice cream trail, and we have the coffee and donut trail. My name is Denise Cornwell. I am one of the owners of Locust Post Brewery. The other owner is my husband, Tony Cornwell. Locust Post Brewery is on the tap and pour trail as well as 1812 Brewery, Dig Deep Brewery, the deep end, Tosa Goat Winery, and Keras Winery, and we all work together because you want a wide variety when you go to a tap and pour trail. You don't want the same beers at every brewery so you know we try to keep it all you know kind of different and so people get lots of different flavors. So at Locust Post we concentrate on more European traditional beers. People you know love to come and see different things at different breweries. Every brewery should be unique and so they get a different experience when they go to them. My name is Rhianna Brown and I am one of the owners of Queen City Creamery and Deli in Cumberland, Maryland. The best thing in Allegheny County, the ice cream trail, it goes all the way to the Oakboro which is a cute little gas station if you've never been in there before and it's much more than a gas station when you go inside and then it goes all the way up to the Frostburg and we actually partner with the Frostburg freeze and they sell our frozen custard there as well. We are independent shop owners and we all do our own thing and we add our own flair to the trail. Throughout the trail you can get a wide variety of different types of ice cream. I would say probably half of our business is from tourists. We have a great location where we're right off the interstates but then we also get a ton of people from the Scenic Canal, the Gap Trail, people that are riding the Scenic Railroad. We get a ton of people from those other activities. The backdrop of these mountains and these trails is my everyday. That's where I want to serve coffee. My name is John Felton and I'm the captain at Clatter Cafe here in Frostburg, Maryland. Coffee and donut trails, it's a pathway like a guide that takes you through the local coffee shops and bakeries. The independent Lyon shops in Allegheny County are ones where the owners are involved. We care very much about every step of the process, making the coffee, making the food, the environment that we provide and especially the way we interact with people because the point of it is to try to put our best forward to offer a space that hopefully the community would recognize that they're regarded and want to make it their place. Definitely come out and visit. There's conversation going on and you're invited. I've lived all over the country and Allegheny County is just so beautiful and offers so many different things.


So with the last update to the game which removes legendary weapons being able to drop from chests, within the Outriders demo a few things have changed and today we check out a new way to farm legendos since this back end update. How's it going guys? My name's DPJ and if you enjoyed the video leaving a like really helps out and if you like what you see and want to see more Outriders be sure to subscribe. So with the patch which landed today the 5th of March a few things have changed within the Outriders demo. The main changes were legendos being removed from chests so that 5 chests or 3 chests farm method you can't actually do it to get those legendos anymore, also epics have been removed from vendor stores. In addition to these changes though people can fly added legendary weapons into the loot pools of side quests. Now all side quests as far as I am aware do indeed have those legendos within their loot pools and the way in which they work is and this is important to remember they are only available in side quests you've completed already so when you replay them that's where you have a chance of doing that legendo. So if you're doing side quests for the very first time and a fresh character or a new character they won't drop from the side quests then but when you instant repeat the side quests as we know within this demo you can instant repeat all missions that's when you have a chance of getting them. Also you have to fully complete the side quest which means going back and speaking to the vendor you got the side quest from and that's when you will receive loot. For the most part the loot doesn't actually pop up on your screen either it's just automatically added into your inventory. So it's best here if you plan on farming side quests to clear out your inventory of items you don't want or hover above all flashing items so once you do get the loot from the side quest you know the actual new piece you got. Now in terms of the fastest side quest you farm it is without doubt the payback side quest mission to get this it's pretty simple pick the third mission down from the lobby menu once you spawn in run to this flag and fast travel here once here run up to this lady leading against this wall and accept the quest and run it once you have run it and beat the captain who i call captain wiener return to the woman and then you will receive that piece of loot remember for the most part it won't notify you you've actually received loot so you just have to check that inventory and here to simply instant repeat speaking to this woman repeat in the quest the only thing you can't do is collect the loot at the end of this mission from behind the captain but you can just keep repeating this side quest without returning to the lobby for a chance of that legendary loot now the question is is running this quest over and over more efficient than farming the og captain or the vanguard captain well the problem is we don't actually know the drop chances at each and the point you can kill the og captain and vanguard captain literally eight to ten times within the same time you do the side quest once it makes you wonder if it's even worth doing the side quests me personally i streamed earlier doing the side quests for literally three hours i didn't get a single legendary from the quests yet i went to the vanguard captain during the same stream and got a legendary within 20 minutes so yeah for now in my opinion i don't think side quests are quicker than farming the captains but it is just my opinion guys if we knew drop rates it would make things a lot clearer but for now we don't and if i find out anything new obviously i will let you guys know right here but yeah i will be back tomorrow with a stream people where you will see me and hopefully see me catching my last five legendaries but on that note guys the end of the video has arrived if you enjoyed it leaving a like really helps out if you're new around here and want to see more outriders be sure to subscribe and hopefully people i will see you on that next one


Hello, this is Laptop Media, and today, we will show you how to open the Apple Mac Mini M1 and what's inside of it. The first thing you need to do is to remove the plastic shroud on the bottom. Get a plastic tool and pry it away. After that, there are 6 Torx 6 screws you need to undo. Be careful, as the Wi-Fi antenna is attached to the motherboard, and you need to undo a further 1 Torx 6 screw to take it away. Please remember, it would be of great help to us if you just hit the like button and subscribe to our channel. That would motivate us to make even more and better videos for you. The next thing in line is the cooling fan. To take it out, undo all 4 screws with the same screwdriver you've used until now. Then, disconnect the cable from the motherboard by lifting it away. Before you do anything, unplug the power connector, as well as the connector next to the fan header. To do so, you need to remove some tape from the former and pop a clip on the ladder. If your goal is to take the motherboard out of the chassis, there are only 2 Torx head screws you need to undo. This time, you need a Torx 10 screwdriver. Keep in mind that you need to use some force, as they are tightened quite a bit. After you're done, just push on the heat sink to slide the motherboard away from the body. And this is how it looks. Sadly, all of the memory and storage is soldered, so you won't be able to upgrade anything internally. If you'd like to see more disassembly videos of the latest notebooks we would highly appreciate if you hit the like button and subscribe to the channel.


Director of financial service is dominantly used through mobile wallets, especially for the unbanned and to start with on how important quality of service works for digital finance where there's no. Mobile network service. A mobile wallet cannot be delivered and in certain instances where the mobile network has challenges, the digital financial service becomes redundant due to the post server relationship that they are. So suffice to say mobile wallets operates and rely on the quality of the networks to deliver at service. So the good health of the mobile network is therefore important for digital finance delivery. For telecom and DFS operators, measurements of quality of service keeper, former indicators help them to understand the state of the markets in delivering the service to the consumers. Criterion such as for every transaction which is sent. It's important whether every transaction is sent is important. Unlike a voice call where you can drop it and then the bailing stops for a digital financial service. Every transaction which is lost, it means it's not accounted for and money is lost and so it is very crucial that for every transaction that is made it is accounted for. It is therefore important to identify and measure and appropriate indicator, which ensures that all transactions are successfully sent to those that are intended to be sent to. And in the situation where the transaction is completed or not, there is the need for a regulatory timeline as to when the transaction is deemed successful. Therefore, for a regulator these. Key performance indicators act as a guide for you to improve the quality of the digital financial service and also the measurements of the performance indicators are used to compare the providers for consumers to make informed choices. Let me credit the ITU for being the avenue where focus group discussions were held which preceded. This financial inclusion global initiative from the output of the focus groups somewhere in 2017. ITUT study group 12, which is responsible for quality of service accepted a work item from the studies from Fiji, which has developed into a global standard and due to the growing interests in the quality of service, which is related to digital financial service, the ITU study group 12 now has a new question, which is focused on such studies. And with the ITU, there is this diverse expertise in regulatory network operations and others. And it remains the primary venue for the development of truly global standards for digital financial services. So this is where everyone who is interested in quality of service related to digital financial service is supposed to have that conversation to know what case studies, what standards and what improvements can be made in this ecosystem.