Houdini, Behind the CSS

Duration: 25 mins
Rhiana Heath
Software Engineer, Blake eLearning

Traditional CSS is limiting in a number of ways. While it has many, many attributes, if you want to make something outside the DOM box your options are pretty limited. Leading to many CSS hacks to make objects like, triangles for example, a reality in a modern web browser. This clutters up the HTML and CSS with extra elements it doesn't need. This then slows down performance and makes the code harder to read and maintain.

This is where CSS Houdini comes in with its DOM magic. It allows you to craft your own CSS attributes using JS Worklets. Making the code more performant, deliberate and reusable. This can also be combined with their new CSS typed system. Which gives you more control over your attributes and useful errors if something goes wrong.

Today I'll be doing a live demo showing a few examples of how to make new attributes with Houdini. Such as: tooltips, custom borders and backgrounds, custom checkboxes and animations.

You may also be interested in

180 mins
Modern Software Development

Our industry never stops changing, but sometimes those changes are trivial and fluffy and we can ignore them. Sometimes they...

25 mins
Remote Working - Is this the New Normal?

In this talk, Nainesh discusses the pros and cons of this new way of working that we have all had...

25 mins
How to Validate your Startup Idea Quickly

I work at Facebook's Innovation Lab as an Engineering Lead. As part of that, I help with rapidly prototyping and...

50 mins
Build Your Own Tech Radar, Capture Your Org's Tech Posture

Software industry changes at a crazy speed. There are always new things coming in and going out of the eco-system...

25 mins
Designers + Developers = Best Friends Forever?

How is the relationship between your design team and your development team? Is it highly functional? Or 'just professional'? Maybe...

50 mins
Empowering, Growing and Coaching your Superstars

Nothing is more rewarding than when your leaders or teammates help you reach your goals or the next level of your career. ...