JSFoo Chennai 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.

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.
currently working at stumulusCo. https://www.stimulusco.com/ as SR. frontend developer.

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