Adam Wathan

Technika

134: Mark Dalgleish - You Should Be Using Layout Components

Full Stack Radio

A podcast for developers interested in building great software products. Every episode, Adam Wathan is joined by a guest to talk about everything from product design and user experience to unit testing and system administration.

Topics include:<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>Links:<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>Supporting the show: I decided to stop taking sponsors for the show because I think advertisements are annoying and no one wants to listen to them.If you do want to support the show, the best way to do it is to pick up one of my books or courses:<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>

Topics include:<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>Links:<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>Supporting the show: I decided to stop taking sponsors for the show because I think advertisements are annoying and no one wants to listen to them.If you do want to support the show, the best way to do it is to pick up one of my books or courses:<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>

Aplikace Youradio Talk

134: Mark Dalgleish - You Should Be Using Layout Components

Poslechněte si podcast