Date: Wed, 12 Feb 2020 14:20:00 +0000
<p>Topics include:</p><ul> <li>What problems you run into when baking white space into components, and why your components should never contain any surrounding white space at all</li> <li>Layout challenges you run into due to the way the browser includes line-height in the size of text elements</li> <li>The trick Mark's team uses to remove surrounding white space from text elements, without removing the space between wrapping lines</li> <li>Using a "stack" component to specify the space between sibling elements</li> <li>Issues with naively just using margin on one side of an element to space elements</li> <li>The upcoming "gap" property in CSS and how it proves layout components are a good idea</li> <li>Using a "content block" component for horizontal spacing/sizing at the page level</li> <li>Tricks for maintaining vertical rhythm despite 1px borders trying to ruin it all for you</li> <li>Why tools like React are so important for being able to implement designs in a way that matches how designers think</li> </ul><p>Links:</p><ul> <li> <a href="https://www.youtube.com/watch?v=jnV1u67_yVg">"Rethinking Design Best Practices"</a>, Mark's talk at ReactiveConf 2019</li> <li> <a href="https://seek-oss.github.io/braid-design-system/foundations/layout">Braid</a>, the design system Mark works on</li> <li><a href="https://github.com/seek-oss/playroom">Playroom</a></li> </ul><p>Supporting the show:</p><p><br />I decided to stop taking sponsors for the show because I think advertisements are annoying and no one wants to listen to them.</p><p>If you do want to support the show, the best way to do it is to pick up one of my books or courses:</p><ul> <li> <a href="https://refactoringui.com/book">Refactoring UI</a>, a book and video series I put together with Steve Schoger on designing beautiful user interfaces, without relying on a designer.</li> <li> <a href="https://adamwathan.me/advanced-vue-component-design">Advanced Vue Component Design</a>, a course on designing simpler, more flexible Vue components that are both more powerful and easier to maintain.</li> <li> <a href="https://course.testdrivenlaravel.com">Test-Driven Laravel</a>, a massive video course on designing robust Laravel applications with TDD. Learn how to build a real-world application from scratch without writing a single line of untested code.</li> <li> <a href="https://adamwathan.me/refactoring-to-collections">Refactoring to Collections</a>, a book and video course that teaches you how to apply functional programming principles to break down ugly, complex code into simple transformations — free of loops, complex conditionals, and temporary variables.</li> </ul>
