JSFoo Delhi 2020

Have you ever thought about the amount of work CSS does? You change a single attribute and suddenly your entire website appears in a different layout. It’s kind of magic in that regard. (Can you tell where I am going with this?!) So far, we – the community of web developers – have only been able to witness and observe the magic. What if we want to come up with our own magic? What if we want to become the magician? Enter Houdini!.

So what is Houdini? Well, I’m glad you asked. Houdini gives developers access to the CSS object model (CSSOM). Instead of updating styles in JavaScript, developers can write code that the browser understands and can parse as CSS!
Houdini is a new W3C task force whose ultimate goal is to make this problem go away forever. It plans to do that by introducing a new set of APIs that will, for the first time, give developers the power to extend CSS itself, and the tools to hook into the styling and layout process of a browser’s rendering engine.

Right now, when we want to apply styles that don’t exist as CSS properties, we need to use JavaScript to overwrite the existing CSS. That means the browser goes through an entire cascade, layout, paint, and composite process before needing to go through the layout, paint, and composite process again for your JavaScript style update to be rendered (this, of course, depends on what you’re updating).

With Houdini, we can write code the browser understands and apply it to the beginning of the cycle, where the CSS is being parsed and comprehended. That means:

• faster parse times
• no need for vendors to add a specific attribute support
• more performance of poly fills
• Better separation of logic and style
• More customized DESIGN SYSTEMS

With Houdini, you could write your styles in JavaScript, invoke the file that registers them to the browser, and then apply those styles in your CSS.

Outline

• current state of css
• issues with current state of css and js animations
• houdini intro
• what are worklets
• create your own worklet
• animations with custom css vars and animating gradiant
• some other crazy things
• fin

Speaker bio

Parth is a guy who is trying to grow up and do mature stuff and work but ends up designing, playing games(most of the time) or watching Movies/Tv Series.Parth has six years of experience in designing and three years experience in front-end development. Parth uses Angular for Creating frontend, ionic and Flutter to create hybrid apps. Parth has mastery over most of the adobe creative suite apps. Currently, Parth is exploring Flutter & Houdini.

Links

• https://github.com/parth181195
• https://twitter.com/jansariparth
• https://github.com/parth181195/Houdini-Paintworklet-Ripple-Eexample
• https://github.com/parth181195/houdin-paint-api-animation-example