Exploring the next gen CSS with Houdini
Submitted by parth jansari (@jansariparth) on Monday, 17 February 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!.
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.
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
- 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
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.