JSFoo Delhi 2020
On component architecture, performance, security for front-end, and emerging trends
JSFoo is a platform for:
- Practitioners to share insights from their work about web application development.
- Learning from peers.
- Discovery of emerging trends for JavaScript in India.
- Understanding perspectives on component architecture, front-end security, performance and emerging trends.
Participate in JSFoo as:
- Participant
- Speaker
- Volunteer
- Reviewer
- Collaborator
- Sponsor
and discover the growing JavaScript community in India.
Talks from previous editions of JSFoo are published on hasgeek.tv/jsfoo
The Delhi edition will be held on 27 November 2020 at India International Centre (IIC), New Delhi.
For inquiries about speaking/collaborating with JSFoo, write to jsfoo.editorial@hasgeek.com
For details on Sponsorship and ticket inquiries, write to sales@hasgeek.com or call 7676332020
pj
parth jansari
@jansariparth
Exploring the next gen CSS with Houdini
Submitted Feb 17, 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.
{{ gettext('Login to leave a comment') }}
{{ gettext('Post a comment…') }}{{ errorMsg }}
{{ gettext('No comments posted yet') }}