134: Mark Dalgleish - You Should Be Using Layout Components

In this episode of Fullstack Radio, I talked to Mark Dalglish about why your components should have no surrounding white space and why you should be using dedicated layout components to handle that problem instead. This is Fullstack Radio episode 134. So the reason that I wanted to have you on the show is you on Twitter are super opinionated when it comes to how people kind of put together their, you know, design systems. Whether or not that's a dirty word is a whole other conversation, and just like their sort of component libraries in general and how people are actually piecing together user interfaces. And it sounds like you've, gone through, you know, a lot of your own pain over the years in trying to get this right and, design things in a way that, you know, is maintainable and scalable and, easy to work with and also lets you sort of translate sort of the way that your designers are thinking about UI, as accurately to code as possible, which I I definitely think is a problem that people run into a lot. So I think maybe the best place to start, would be just talking a little bit about, like, some of the challenges that you've run into yourself when it comes to building, sort of component systems and dealing with layout, I think especially is a is a hot topic that I'm curious to get into. Yeah. I mean, so I like a lot of people are getting into design systems. And as as you said, that's a whole big can of worms, even just the term. You know, at at at the basic level, I think the reason it's become so popular popular is that technology choices that people are making are driving them in this direction the biggest one I think being React that's influenced a lot of people, where if you do React well you basically are building a component library that leads towards the idea of a design system. Yeah. And so I, you know, so I was on that journey fairly early on, I got onto React quite early, and, and I think what happens is people naturally start building up the most obvious kind of leaf nodes, you know, buttons and text fields and even, you know, text components and headings and things like that, but what happens I think is that people run into this problem where and this is definitely what happened to us is that as soon as you start trying to compose up larger parts of the UI you feel like it's a lot less obvious what you're supposed to do, you know a button's very easy but you know how do I construct a page? And in practice because we didn't really have a good answer you would just kind of fall back on CSS more or less and just start relative to the the components that you were building, it felt like you …