[Online Meetup] How to Systematically Debug Your CSS Just Like You Would Your JavaScript?

Published: 14 February 2021
on channel: Wix Engineering Tech Talks
312
15

All too often developers are left completely puzzled when a browser renders CSS in ways they didn’t expect. It’s not dark magic though and as developers, we know that computers are just parsing our instructions. While many talks discuss how to fix common bugs, this talk focuses on taking a deep dive into browser internals to see how our styles are parsed and rendered.

// Notes
If you're a web developer, chances are you're going to have to write some CSS from time to time. When you first saw CSS code, it probably seemed like a breeze. You added a border here, changed some colors there. JavaScript was the hard part of front end development!

And yet somewhere during your progression as a front-end developer that changed. What's worse is that many developers in the front end community have simply learned to dismiss CSS as a toy language. The truth, however, is that when we hit a wall, many of us don’t actually understand what our CSS is doing under the hood!

We all like to joke about it, but how many of us have actually taken the time to try and understand the CSS we're writing? How many of us have actually reasonably debugged an issue to the next lowest abstraction layer when we hit a wall? All too often we settle for the first StackOverflow answer, hacks, or we just let go of the issue entirely.

In this talk, Aimee takes a step back and stop mindlessly throwing darts at the dartboard! She discusses the most common issues developers face, such as z-index, the cascade, and positioning in depth by diving deep into the browser's internal rendering engine structure to see how our styles are actually parsed. We can’t promise you’ll have an eye for design after this talk if you struggled with it in the past, but you might just walk away a CSS guru!

// Bio

Aimee Knight is a Software Architect and former professional figure skater currently residing in Nashville TN. Outside of work, she's a Google Developer Expert in Web Technologies specializing in performance, a panelist on the JavaScript Jabber podcast, and an international keynote speaker. Currently, she specializes in DevOps, JavaScript, React, and CSS. However, she's worked extensively in Angular, Node, and Ruby on Rails. Her past involvement includes working at npm, Inc., being a weekly panelist on the Angular Air podcast, a co-organizer for CharmCityJS, and a mentor for Baltimore NodeSchool and Rails Bridge.

You can follow her on Twitter:   / aimee_knight  


Watch video [Online Meetup] How to Systematically Debug Your CSS Just Like You Would Your JavaScript? online without registration, duration hours minute second in high quality. This video was added by user Wix Engineering Tech Talks 14 February 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 31 once and liked it 1 people.