 jobs, not literally, but you get the idea. So apologies in advance, because this talk is going to be, there's going to be a lot of JavaScript in this talk. You only have to apologize to her. I apologize to you, Waging, okay? So, I love you, 3000. I love you too, 3000. So how do I even begin to explain CSS Houdini? I think the best way to explain CSS Houdini is by examining its name, right? So Houdini actually got its name from Harry Houdini. Who knows Harry Houdini? Who is he? Much better than an artist. Right, he's a great illusionist and whenever you actually explore talks or articles or blog posts on CSS Houdini, there's always symbolism that centers around magic and rabbits and top hats. So why is that, right? So the reason is because, well, CSS in itself is very magical. You change one thing in CSS and everything changes on your web page, right? It's magical. However, up until this point, we're only allowed to observe the magic. We are not allowed to create our own magic or define our own magic, right? So because what if you want a new CSS feature, then you're going to have to play a long waiting game. And the reason is because there is a process that the CSS working group has to go through just to get the CSS that you want out of that window, all right? Specs do not just exist out of thin air. There are stages through it. There are discussions that happens online and offline in order to do a document, a CSS specs documentation. And it goes through multiple drops and stages, okay? And I'm not even factoring in the time it takes for your CSS feature to be implemented across all major browsers. And I'm not even factoring the time of inconsistencies in that implementation, right? Okay. So how do we actually cope with this right now? How do we actually cope with the fact that we can't create our own magic, right? Okay, if you look at our browser rendering process, we don't really have access to any of the browser rendering process right now. The only thing we have access in is the DOM. And the DOM we can actually manipulate through JavaScript. It feels like a dirty word in this meetup, so I'm sorry. So that's what you would do. You would actually write a JavaScript to update your style. Let's say that you want a Pinterest style layout, right? You will actually create JavaScript. It's called masonry style layout. So but there's an issue with that. The issue is that depending on what you're trying to do, the browser will have to go through this entire process again, just to update that, just to render your JavaScript style update. So this is why CSS Houdini is related to magic, because for the first time ever, we're actually allowed to do something that we can never do before, which is extending CSS. So this is what Houdini is. It's actually a collection of browser APIs that allows you to gain access to the browser's rendering engine, okay? But for the purpose of today's talk, which is basically what Houdini said, I'm just testing it out, testing the water, we're going to talk about three of those APIs, properties and values, type object model, and the paint API. But why? Why do we care about CSS Houdini? It's not even out yet. Nobody gives a shit about it. So why do we actually care about exploring things, right? Why is it so important to explore things before it's even out yet? Well, in order to answer that question, I'm going to go on a run. So please forgive me in advance. Okay, so many moons ago, I actually wrote an article about doing something purely in CSS. I was sitting at home one day, minding my own business, and I got a reaction back telling me to use SVG instead, because it's easier. Okay, so, well, my first reaction to this was, you know, this, because I thought that, you know, I know that this commenter means well. I know he has good intention, but the problem is he isn't telling me anything new. I know it can be done with SVG. I just don't want to, right? I mean, I'm a rebel that way. So, but this is usually, usually most of the time, the kind of reactions I will get whenever I try to do something different or something new. The question that centers around why do we even do this when we have that, right? But here's the thing though. I shouldn't really complain about this, because some other people actually got it much worse than me, especially on that health site called Twitter, on YouTube, on blog posts, because I remember that opinion leaders especially got it even much worse. So, I remember back in 2016 when CSS Grid was out, everywhere I see was this kind of reaction, oh, why even CSS Grid? I'm going to have to write two different layouts for it. But the thing is, right, you know how in a certain scenario, when someone asks you a question, you'll go like, oh, that's a good question. But I don't really think that this, per se, is a good question, because it just shows a lack of research on the questioner's part, right? And it's not my job as someone who shares knowledge to keep on correcting you or telling you about it, especially when a little bit of research, you already find out the answer to this question, okay? So, why exactly? Well, because it's all about pushing the boundaries of a particular tool, right? Only then, you can actually gain a deeper knowledge of it. It's also about exploration, because through exploration, you gain a deep appreciation of our industry and how things work. And potentially, you could discover new workflows, right? That could potentially help you in the future. May not be helpful now, but in the future, it could inspire something. And of course, there are so many reasons to that, but it's for us to discover, so that we can come up with good questions. Okay, so today's talk, because of all of these runs, today's talk is not just going to be about the three APIs. It's also going to be about how things are done prior to Houdini and how it can be done with Houdini today. Because I think that by comparing these two different workflows, only then we can see the potential that Houdini can give us, right? Because by differentiating them, you can pretty much learn new things. I don't think so Houdini is just for polyfilling CS as there's so many benefits to it. So without further ado, let's go to our first API of the day, which is properties and value. So I hope everyone knows by now that CSS variables are cool. Who uses CSS variables? I'm so disappointed. So disappointed. Okay, never mind. Well, for those of you who are who are not on the bandwagon yet, CSS variable is cool because it's dynamic, right? For example, forget about changing a property. I can just change a variable here. And you can actually, all of my slides would change, right? So it's dynamic by nature. And that's just one of the greatness of CSS variables. And you can get this with SAS variables, because SAS variables need to be compiled in the new CSS file. It's not dynamic. So despite, because this world is not a utopia, there's always limitations on something. So it has its limitation, which is like CSS variables right now cannot be transitioned. You can't really animate a CSS variable right now. So what happens if I want to animate a gradient, right? I could just do like, what's going to happen if I actually want to try and animate a CSS variable? What's going to happen is that it's not going to transition, it's just going to change, right? Why is that? Why isn't CSS variable animatable? Well, the reason is because there's no meaning to CSS variable. There's no semantic to it. When the browser sees your CSS variable, it sees it as string. It doesn't know whether it's a color. It doesn't know if it's a number. It doesn't know if it's a percentage. So it doesn't know how to even begin to transition it from what to what, right? So no sweat. There are ways to actually animate a gradient right now without Houdini. So we don't really need Houdini. You can actually do it with just CSS. Yes, just CSS. So how would I actually animate a gradient right now? Well, the first one is I could just like, I can make it three gradients, right? Tomato, deep pink to blue. What I would do is I just increase the background size by 100%. And then on hover, I'll just transition 100%. And there you go. A nice animated variable. But it's kind of like, I don't really like it because it seems so obvious. It's not fading in. So what should I do if I want to fade in, right? If I want to fade in, fade out. What I would do is I'll have two different elements, right? Of two different gradients. I would stack them on top of each other like this. And I will just animate the opacity. So there you go. A nice, animatable gradient. But what's the problem with this code right now? The problem is, you know, the first one is just that, you know, I work with people who are not well versed in CSS. I don't think so. They will, I assume that when they see this code, it's not immediately easy for them to understand. And us as an engineer, we like things that are maintainable. We always write things that are easy to understand. We don't want to be too smart, you know, because we want our friends at work to be able to maintain our code, right? So that's what I don't like about the solution. The second one is, this is too much code, you know, like why do we even need all of this code just to animate a damn gradient? So this is where Houdini comes to place. Okay. So we have the CSS properties and values, Houdini's properties and values API actually gives you this way to define a type for your CSS variables. So basically, I can just put a CSS variable, define a type and give it an initial value. So let's say that what happens if you give it a percentage instead of a value? What happens is that it's just going to ignore that, right? And it's just going to put purple as it is. It doesn't give you any error because CSS just don't care. It's honey badger, you know, like, yeah, honey badger don't care. You know that joke? Okay, anyway. I think for those of you who use TypeScript, who is using TypeScript? Yay. No, not yay. So for the ones who are using TypeScript, you'll be happy to know that your CSS is pretty much strongly typed right now, right? You know, it's strongly typed CSS. So how do I actually use CSS Houdini to animate a variable right now? So it's, I have this code right here. It's pretty short. I just want to animate it on Hover. What I would do is I'll just put it here, right? Call it and I'll put end to it. I'll just run it. Oh, it didn't work. I was so scared that this would happen. I don't know why. Let me check my Chromeplex because that's really bad. Experimental, it's enabled. So it's a very whiskey business when you're trying to, when you're trying to do live demos, sometimes things that, oh, it works. It's a really like, tonight, just for tonight, I'm going to embark in a very irresponsible and risky business, which is live demo. So, you know, forgive me if it doesn't work. Okay. So, but there it is. It works. So anyway, that's the best thing about Houdini. It leads to maintainable animations, right? So, but forget about what I say today. Like, I really suggest you to look up this article by Anna Tudor on CSS tricks, titled What Houdini Means for Animating Transform. I don't know if you know Anna Tudor, but she does really amazing animation works involving math. You might like it. Yeah. Involving math and stuff like that. And she just talks about how she used to do it without Houdini and how Houdini actually changed that workflow for her. And I think it's amazing. Check it out. So, second API, type object model. So, what is it? Right? What is type object model? What is actually the opposite of what I just say? So, the opposite was like, before that, I actually said that you could assign type to your CSS variable. Now, with type object model, it actually, its CSS value is actually typed as JavaScript objects instead of strings. So, your JavaScript is actually returning a particular, it returns the type. It doesn't return string anymore, right? Right now, with CSS object model, what happens is that when you go and try to get the width or opacity or any properties right now, it will return a string. But with a type object model, it actually returns information like basically quite a verbose information about a property. It has your value and it also has your unit here, the type of it, right? So, you have an ability to get that information. So, why is this important though? Why is type object model important? Because I think that among all of these three APIs, I think type object model is actually the API that has the most impact on our day-to-day job. So, I'm pretty sure that us as an engineer, we need to do a lot of type conversions where we want to compute a particular value, a CSS value, whatever I want to do some math with it. I need to do parts in, change it to integer first, and then basically do my math. But what's the problem with that right now? Well, it can be really slow, right? But you know what? Don't take my word for it. I can tell you that it's slow. I can tell you that it's bad for performance. You might believe me. You won't think that I'm a liar, but seeing is believing. So, let us do a little bit of performance benchmarking, and I hope the demo works. It's so daunting. Why did I do this to myself? Wijing, I blame you. Okay, so here you go. All right, let's see. Now, we have the without Houdini function, right? Where I'm doing a parts in kind of like a type conversion. So, I would do without Houdini, okay? And then I will run it. It takes 609 millisecond with the type conversion. But what if I do it with Houdini with the type object model that returns me immediately the type, the entry without a string. I don't need to do any conversion at all. So, I can do it like this. How long do you think it'll take? No, no idea. Okay, never mind. Let's just do it. Six milliseconds, right? That's a pretty, pretty big improvement. Pretty significant, right? Because I have 1000 elements here, and I'm changing the width, right? So, I changed it from string to in. But without, but with Houdini, I don't need to do that anymore. Six milliseconds is pretty, a big improvement for us. So, now if you cannot remember anything from my lecture today, just remember one thing for me, that you have better performance with Houdini. Type object model is awesome. Repeat after me. Type object model is awesome. Do it. Oh, you guys are dull. Okay, anyway, finally, the paint API. My last API of the day. I think this is a fun one. But the one that I'm most nervous about because live coding is going to be involved a little bit in here. So, before, when I talk about paint API, I need to talk about worklets. So, what are worklets? It kind of sounds like web workers, right? And if you think that it sounds like web workers, yeah, you're right. It's kind of similar to web workers. But it's a bit different because web workers are actually more heavyweight than worklets. Why is that? Worklets are actually meant to be called multiple times by the render engine. So, it needs to be small. It needs to be trashable. It cannot be heavy. You cannot do any heavy computation in worklets compared to web workers. So, this is the reason why worklets do not have access to global scope items. So, you have no set timeouts. You have no request animation frame. There's no way you can do animation just through a worklet right now. And also, if you want to play with worklets, make sure you have a local web server because it's only working on HTTPS and also local hosts. Okay, so, what exactly is a worklet, paint API worklet? It allows you to actually draw on a canvas that can be used on background images. You can also use it as a CSS mask. You can also use it on border image source property. And how do I actually play with worklets right now? So, currently, at this point, if we want to kind of polyfill our CSS, we write JavaScript. And it only involves JavaScript and HTML. You don't really do anything with CSS, right? So, with worklets, you just create a worklet in your JavaScript file. This is a JavaScript file. Add a worklet to your HTML like this. Remember, it needs to be on HTTPS or local hosts only. And then, in your CSS, you actually refer to that worklet, to the definition that you made on the worklet. Previously, I named it as, you can see here, I named it as feature. So, I'm going to basically define feature here, which I already defined on my worklet. So, what can we actually do with worklet right now? One example is the conic gradients. So, if you know that conic gradient, even though it's supported right now, but there's no major browser support. Conic gradients is a transition of colors in the middle of a circumference of a circle. So, that's what conic gradients is. It's currently only supported in Chrome. You don't have it in Firefox. So, if you want to use conic gradients right now, you can, even without Houdini, Vyavaroo has a library for it. But the good thing about this library is you can just grab it, throw it inside your worklet, and then you can make a polyfill for the conic gradient feature. But forget about the conic gradient. It's kind of boring. So, today, let us create an interesting checkbox. I'm about to embark on the risky behavior that I just told you right now. So, it'll be good if you can give me a little bit of moral support. So, what are we going to build today? The reason why I really want to build this with you is we're going to tie up all of the things that I've already talked about. We're going to tie up the custom properties, the type object model, and the paint API. Right? We're not just going to build a checkbox, we're also going to animate it. So, what are we going to build today? Let's see. I hope this works. We're going to build something like this. You click on this, and you see that X and how it's nicely animated? Yeah, that's what we're going to build with Houdini. This can actually be done right now without Houdini. As I said, you don't really need Houdini today. You can pretty much build whatever I had built here without Houdini. But, you know, it's fun to explore. How do you actually build it without Houdini? Well, you can go to CoDrops, actually. CoDrops has an example. It looks pretty much the same. It's currently done in SVG and animated through JavaScript. So, let us do this. Okay. Here we go. I'm going to test the water. Okay. If it doesn't work, I'm just going to explain what I did. Okay. I think that's the best way. Okay. Testing the water is okay. Let me just explain what I did. Basically, I wrote a worklet that just draws the X on my checkbox. I'm just drawing the X on my checkbox. Can everyone see the code? Okay. Okay. Is it okay now? Okay. Never mind. Turn off the lights. Don't worry. I won't let them leave. Okay. So, I have a worklet right here, which I then, which I basically add on my HTML like this. CS has paint worklet, right? And then on my CSS, I'm actually calling it like here, paint checkbox. I'm referring it to the worklet that I've written. So, testing the water, I always have a variable here. And in order to actually use a variable with worklet, you just need to use the properties and values API just to register it. So, testing the water, I'm going to try and see if it applies any color. Stroke stop. Let's save this and work on it. Oh, it works. So, yeah, we have colors right now because I actually use the particular CSS variable to actually apply colors. And I've actually do the colors by configuring it through CSS variables. But let's do something fun. You see how my x is kind of near to the edge of the box right now. Let's give it a little padding. So, for this example, let's do something like giving it some sort of padding. I'm going to call this edge. The type is number. And its initial value will be zero. And for CSS, all I'm going to do is I'm just going to configure it here. Let's just say I'm giving it five. And finally, to use it, I just need to call it in my worklet here. This is basically just getting the variable value. And then I can just finally use it like this, right? Minus edge, minus edge. Okay. So, save. There you go. You see that there's more of a space now between the x. So, you see how we can actually play with variables with Worklet, right? You need to kind of define the variable, use it in your worklet, and then configure it through CSS. So, configuring it to CSS is just simple, right? You can just do like, where is it? Yeah, I can just make 10. And it should basically be narrower in a way. So, let's see. Yeah, more narrower like that, right? So, it's configurable through CSS. So, this is just to give you a general idea on how we can do it right now. So, where's my slide? Okay, there it is. Okay. So, next, we're going to do something a little bit fun. We're going to try and animate it. So, what we have right now is something like this. There you go. Some animation, right? So, how do we achieve that? So, let's take a look together on how to actually do animation. I'm going to explain how to do the animation first. Remember when I say that Worklets do not have access to any timing functions like request animation frame and anything like that. So, if you want to do any kinds of animation, you need to do it purely through CSS variables. So, I talk about how cool CSS variables is for animation because it has type now. So, let's take a look. What I have is just, I have a CSS variable here that I call P1 with a type of percentage, right? And basically, on my CSS, I define a keyframe called draw. So, it will go from 0% to 100% here. So, later on in my checkbox check, because it only happens when it's checked, I assign an animation property to it calling that particular keyframe with the particular transition easing and transitions. So, what do I do here? I call the Worklets here, right? I pretty much call that particular variable here in my Worklet. And I basically do a little bit of math, which is just trying to make sure that it transitioned from 0% to 100%. So, whenever the transition is occurring, it calls your Worklet over and over again. This is why Worklets needs to be small because it's by their nature to be called again and again. And we don't do the calling, the browser does the calling. So, what if we want to do something even more fun, where we want to animate it one after the other, right? I don't want it to happen at the same time. I want the one cross to happen and then the other one to come up. Well, again, it all has to happen through the keyframes. So, what I would do is I would have a P2, I define a new CSS variable. And on CSS, I will do, I'll make my keyframes more specific using percentage. So, I have 0%, 50%, 80%, and 100% to actually define how that variable should behave on each of this duration, okay? So, what happens when it's 0%? Well, both of them should be 0%, right? P1 and P2 should be 0%. And then on 50%, only P1 should finish. P2 should still be 0, right? Because it should happen one after the other. Well, for 80%, I'll just put 100% here. And finally, for P2, the animation should finish, basically, right? So, just make sure my code is correct. P1, P2. Okay. And finally, on my checked, I have P2 100% because I want it to persist. So, that's why I have to say that, okay, on check, it should be 100%, right? So, finally, I'll just use the variable here on my worklet. So, P2, just define P2 here. Make sure this is P2. And then I have P2, P2, and P2 right here. Okay, so, let's hope it works. And I didn't make any mistake. So, I'll just run it. There you go. One after the other. So, yay. Oh my God, pressure is over. So, basically, okay. But we have like one final thing that happened. You see what? I made a bug here. We're on hover. My second cross didn't appear. That's because, again, I kind of need to actually define P2 as 100% here, right? So, then you will get something that looks pretty okay. Right. There you go. Right. So, okay. Live demo is over. I'm so relieved. Okay. So, variables plus pain API is actually pretty cool to play with. And what I really like about it is just better code configurability. I just really like the idea of doing any style configuration that I have through CSS variables in my CSS. Because it just makes sense. It doesn't make any sense when I have to do the configuration through JavaScript, right? Because JavaScript is more about functional stuff, not really styling. So, doing it through CSS just gives me that I really like that separation of concern. So, let's recap. What's great about Houdini? Polyfilling CSS DAW. It's basically the talk description. And maintainable code for animation that we talk about. Please check out Anna Tudor's article on CSS tricks to learn more. And better performance. Remember that. If you do not remember anything from this talk, remember that type object model is awesome. And finally, better separation of concern. Better configurability. You configure styling in CSS, not JavaScript. And that makes sense to me. And I think that it can potentially change our future workflow where people actually just give you a workload. And you just configure it through CSS, right? So, what's bad about it? Because, again, it's not a perfect world. What's bad about it is that it's not ready yet. It's funny because, and kind of ironic, we're talking about polyfilling CSS, but the tool to polyfill it, it's not even ready yet. Yeah? You like that? Okay. So, browser support is pretty sparse as well, even to play with it. It's not that good yet, right? You need to enable it through a flag. And finally, I think the learning curve for Paint API, which you need to know canvas, could potentially throw people off. But to be honest, this is not really an issue. I know nuts about canvas before this talk, okay? I actually learned it in one weekend. That's amazing. So, what's next for me? What's next for me is I'll be checking out the layout and animation workload API, right? This is pretty cool. You remember that Pinterest-style layout I told you? You don't need that JavaScript library anymore. You can just do it through a workload. But I don't know how to do that yet. I have to check it out for myself. Part two, yes, part two. And a roadmap to tell you how you can start exploring Paint API today. Remember to just turn on the flags in Chrome, if you're on Chrome. And first, just start by playing with properties and values API, right? Registering a custom property in your JavaScript file and try it out. Second, create your own workload. It doesn't have to be stylish or anything right now. It's just to try things.