 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. Go to you Sarked. 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? And each child is again, it contains two information about the child layout, layout child and the layout fragment. 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.