Tj_Vantoll:
Hey everybody, welcome to another episode of React Roundup. I am your host today, TJ VanTole, and with me on the panel, I have Paige Niedringhaus.
Paige_Niedringhaus:
Hey everyone.
Tj_Vantoll:
And our special guest today is actually a returning champion. We have Travis Wraith-Mayer on the show. Travis, how's it going?
Travis Waith-Mair:
going great.
Tj_Vantoll:
Cool. Well, we've had you on before. It was episode 156, if anybody's curious and wants to look back to talk about bedrock layout, a CSS framework you've been working on. So, but why don't you start by introducing people in case people don't remember episode from a year ago. Tell people who you are, what you do while you're famous, and then maybe from there, tell us what Bedrock layout is about. Maybe we could start there.
Travis Waith-Mair:
Yep, sounds good. Yeah, so I'm Travis Waithmare. I'm a software engineer. I've also had a personal change. I used to work for Anonymy Labs last time I was on. And now I work for Plex, the media service provider. So that's
Paige_Niedringhaus:
Cool.
Travis Waith-Mair:
been
Tj_Vantoll:
Nice.
Travis Waith-Mair:
a change. And throughout all that, though, I still maintain, I created and maintained the Bedrock layout primitive library, which started out as a react based component library to allow you to I've also kind of got a little bit better with messaging. I now call it the Lodash of web layouts.
Paige_Niedringhaus:
Ooh.
Travis Waith-Mair:
Because
Paige_Niedringhaus:
Ha ha
Travis Waith-Mair:
the idea
Tj_Vantoll:
Oh, that's
Travis Waith-Mair:
is,
Tj_Vantoll:
nice.
Paige_Niedringhaus:
ha.
Travis Waith-Mair:
yeah, yeah, because the idea is like, it's just like Lodash. It's a whole bunch of utility functions, or in this case, utility components that by themselves don't do everything you need, but when composed together, like, it lets you do pretty complex stuff. But more
Tj_Vantoll:
Cool.
Travis Waith-Mair:
recently, I have Yvonne, it was built, like I said, on React and unapologetically on style components as well. Which is great, but that also limits you to A, using React and using React with style components. And I knew to future proof and also for just my own sake, as I will go explore around in different opportunities. I still want that fun, composable way of building layouts, but I don't want to recreate the library for every single framework. I don't want to create a view or a solid layout or a whatever version I happen to be interested in.
Paige_Niedringhaus:
Mm-hmm.
Travis Waith-Mair:
Or even if I do, I want something that's easily transported between the two, if that's eventually something I end up doing. So that basically means I need to go right back down to... the platform and and use go to CSS. And the hardest part was like, how do I recreate the fun composable way of building layouts that I was doing with bedrock, but using only CSS.
Paige_Niedringhaus:
Mm-hmm.
Travis Waith-Mair:
And that's where I, I've kind of feel like I've stumbled on some really good methods with, um, what's called the avo method of building CSS and that's helped me translate this. in a great way, in a very composable way, but still like, well, in a very raw CSS kind of way, but still composable, like in a component library.
Tj_Vantoll:
Awesome. So there's quite a bit to unpack there.
Travis Waith-Mair:
Hahahaha
Tj_Vantoll:
So we can start with, my first question, if we just, maybe we can start with just the CSS only approach of Bedrock layout. I'm curious when it came to developing that, is it like, I'm assuming like it's sharing code between the components and the actual, just the CSS library that's standalone. Were you able to like, abstract that fairly easily or was like how much work was it to try to make the two? Like I'm also wondering like as you maintain this right like Is it easy to maintain these things side by side when you need to make an update? How how do you have that that working from a development perspective?
Travis Waith-Mair:
So right now, yeah, it says separate CSS package. And right now it's all being managed in like a mono repo using Lerna. I have debated whether going, everything that's been going on with Lerna lately, whether it makes sense to jump ship and go over to Turbo repo or whatever, but that's like nuances and details.
Tj_Vantoll:
Could you quickly just say what like Lerna is and what the drama is? Because
Travis Waith-Mair:
Yeah.
Tj_Vantoll:
I,
Paige_Niedringhaus:
I'm out of the loop.
Tj_Vantoll:
yeah.
Travis Waith-Mair:
Lerna is a tool that allows you to manage Monorepo. And for those who don't know what a Monorepo is, it's not a monolith. The naming is kind of unfortunate because it kind of gives some... ideas of what it actually isn't just because of the word motto in there.
Paige_Niedringhaus:
Mm-hmm.
Travis Waith-Mair:
But it allows you to maintain in one repo multiple packages as if they were separate repos but they all have interdependencies. So for example in the case of Bedrock there is a grid component but there's also a masonry grid that uses the grid component but then builds on top of that. And so if I go make a change in grid I also... so don't want to break something in the masonry grid by accident but I'm not working on the masonry grid directly and they're separate packages and that and if I make a breaking change in the in the grid component I also want to do a update to the masonry grid to do a breaking change because it's dependencies. So all these things can get really complicated as that scales as you can imagine. Well, Lerna allows you to do things at the root and do them across multiple things. It keeps track of that. It will keep track of your, as you make breaking changes, it will automatically know, hey, masonry grid needs to get a. in this case would need to get an update. And it does all that. So me as an individual, I can still do manage a pretty, getting kind of large library of components by myself still, or with just a few maintainers. The...
Tj_Vantoll:
I have to say just real quickly, everybody should just look up Lerna, it's L-E-R-N-A, just to see their logo because it's kind of amazing. It's this like multi-headed dragon. It's such a good metaphor.
Paige_Niedringhaus:
Eh!
Tj_Vantoll:
I am curious on the drama of it because also if you go to their GitHub repo, the thing on top, the very first note on the readme is your favorite tool is alive and well with a
Travis Waith-Mair:
Uh...
Tj_Vantoll:
link to a blog post. And I have to say like, That's not the most reassuring
Travis Waith-Mair:
lol
Tj_Vantoll:
to see is like the very first in bold met. They might want to work on their messaging. That's, it's not usually how you
Travis Waith-Mair:
Well...
Tj_Vantoll:
try to reassure your community
Paige_Niedringhaus:
Yeah.
Tj_Vantoll:
that the things are fine.
Travis Waith-Mair:
The context behind that was like, learn a, it was created. And I don't know if you know a lot about storybook, same thing is created by somebody. They're like, I'm kind of done with it. And it's been skipped around from maintainer to maintainer to eventually like, people are like, no, I don't want to, I'm kind of done with it. And it was officially like announced we're done. It's over. We haven't found anyone else to maintain it.
Tj_Vantoll:
Ah,
Travis Waith-Mair:
And.
Tj_Vantoll:
okay.
Travis Waith-Mair:
Then NX, I believe, the company behind that said, no, we still want this. We think this is good. In fact, we can grow and make it competitive to some of these other tools that are out there. They took on the library. And so it's got a corporate backing now.
Paige_Niedringhaus:
Yeah.
Travis Waith-Mair:
So that's good. Or at least, yeah, someone who actually is getting paid to maintain it and build it and integrate it with their tools. So. The good is there are people actually maintaining it. Who knows now that it's part of a corporation, who knows where it's going to go because it's now going to be a tool for their benefit
Paige_Niedringhaus:
Mm-hmm.
Travis Waith-Mair:
first and foremost. But I still think ultimately it's still going to be good just like Storybook was ultimately adopted by Chromatic and it's
Paige_Niedringhaus:
Mm-hmm.
Travis Waith-Mair:
going to be a tool for Chromatic's purposes but it's still a good community tool in and of itself in
Paige_Niedringhaus:
Yeah.
Travis Waith-Mair:
my opinion. So I have Cautiously optimistic I have decided not to change yet, but there are
Tj_Vantoll:
Yeah
Travis Waith-Mair:
some up that and it's just so hard to change some of those things that
Paige_Niedringhaus:
it is once you lock in that's really a lot of work to extract yourself. So Lerna is a little bit on the fence. It sounds like it's stabilizing, but who knows what direction it's going to go now that there is corporate backing for what was once a completely open source project. Have you looked into other ones? I think Narwhal is another one that is pretty good for mono repos.
Travis Waith-Mair:
Narwhal is the one, that's the one the company's adopted at LearnNN. I think they're going
Paige_Niedringhaus:
Oh, okay.
Travis Waith-Mair:
to like, yeah, I think they're going to be like integrating and finding a way to make that work.
Paige_Niedringhaus:
it.
Travis Waith-Mair:
But
Paige_Niedringhaus:
That
Travis Waith-Mair:
the
Paige_Niedringhaus:
makes
Travis Waith-Mair:
other
Paige_Niedringhaus:
a
Travis Waith-Mair:
one,
Paige_Niedringhaus:
lot
Travis Waith-Mair:
yeah,
Paige_Niedringhaus:
of sense.
Travis Waith-Mair:
is Turbo Repo, which is owned by Versel
Paige_Niedringhaus:
Mm.
Travis Waith-Mair:
now. See, I think a lot of these really big tools are eventually just going to get owned by other corporations.
Tj_Vantoll:
It's crazy the
Paige_Niedringhaus:
Sure.
Tj_Vantoll:
way the JavaScript world is now. Like it
Paige_Niedringhaus:
Just
Tj_Vantoll:
used to be this way
Paige_Niedringhaus:
gobble
Tj_Vantoll:
with companies
Paige_Niedringhaus:
them up.
Tj_Vantoll:
and now it's like the JavaScript ecosystem. Like everything, there's so much money that
Paige_Niedringhaus:
Hehehe
Tj_Vantoll:
these,
Travis Waith-Mair:
Yeah.
Tj_Vantoll:
these things, you get popular and Vercell's got money in the bank they can throw. It's some person that creates a cool tool.
Paige_Niedringhaus:
Hehehehe
Travis Waith-Mair:
Yeah, and Netlify recently started sponsoring Ryan Carniato to do Solid.js just to build like a framework. Like, I think
Tj_Vantoll:
Yeah.
Travis Waith-Mair:
that's really cool that they're doing that.
Tj_Vantoll:
I mean, most, I'd say overall, most companies that have done this, like the storybook example is one good one, have done right because they know that it'll look bad upon them if they take like a beloved free open source tool and like
Paige_Niedringhaus:
Pay wallet.
Tj_Vantoll:
corporatize it and yeah, paywall it exactly. So I think for the most part, it's been good. And I mean, it gives people that you know, it took time to create something usually for free and
Travis Waith-Mair:
Yeah.
Tj_Vantoll:
gives them a chance to get paid to do it. So it's mostly a good thing. It's just kind of just crazy that this is the world we've, this is the model we've ended up with.
Travis Waith-Mair:
Yeah, I know. But I think that's probably the most sustainable for like these really big things. Like, I'm surprised. I think Vue is probably the exception with V and everything he does. Like, I don't know how he's
Tj_Vantoll:
Yeah.
Travis Waith-Mair:
been able to maintain his life
Paige_Niedringhaus:
Hahaha
Travis Waith-Mair:
as the benevolent dictator, as they say, whatever, over the view.
Paige_Niedringhaus:
Ha
Travis Waith-Mair:
Ecosystem
Paige_Niedringhaus:
ha.
Travis Waith-Mair:
and Veed and everything that keeps coming out of that without direct corporate sponsoring But for the most part it seems like every other really big library needs that Just to maintain just the community be able to like handle everything that needs to happen at that that level
Tj_Vantoll:
So Vue very much has a sponsorship. Don't feel sorry for the people behind
Travis Waith-Mair:
Hahahaha
Tj_Vantoll:
Vue. And I could say this with some background. So if you go to the Vue homepage and you scroll down, you'll see a bunch of logos.
Travis Waith-Mair:
hahahaha
Tj_Vantoll:
And I know firsthand that it costs a lot of money to be one of those logos.
Travis Waith-Mair:
Hehehehe
Tj_Vantoll:
Because the company I used to work for paid a good chunk of money to be on that list for quite a while. And then we debate every year. when it came
Travis Waith-Mair:
Hahaha
Tj_Vantoll:
up again, whether to renew. So
Paige_Niedringhaus:
I'm gonna go.
Tj_Vantoll:
the view people are doing all right. So
Travis Waith-Mair:
That's
Tj_Vantoll:
I
Travis Waith-Mair:
fair
Tj_Vantoll:
wouldn't feel too bad for them. That's another model, but like that view is also some of the exception because it's gotten to such a huge scale that they can do that. Whereas like your average JavaScript library, not very many people invent the next view. So this model isn't like for everybody out there, but.
Paige_Niedringhaus:
The only other like it really interesting model I can think of is what Tanner Linsley is doing with the tan stack. You know, he's built all these awesome
Tj_Vantoll:
Yeah.
Paige_Niedringhaus:
libraries that make React query easy and react table and react location and this and that and the other, but he's using all of those same libraries to run his own business. So I don't know when the guy sleeps, but he's come up with a really good idea. And you know, everybody else likes it so much that they just want to contribute to it and. be part of the open source part of it and it actually helps him do his business. So, you know, it's impressive.
Travis Waith-Mair:
It is. And it's really interesting because, yeah, his point of view is that if I can find an open source thing that will do what I want, I'll just use it. But if I can't, I'll make it.
Paige_Niedringhaus:
Right?
Travis Waith-Mair:
And so when he makes it, that's almost like, what is it that the other one is not doing out there? Like when React location came out and it's
Paige_Niedringhaus:
Mm-hmm.
Travis Waith-Mair:
like, what is he not getting from React router or in the other, like, you know what I mean? It's kind of an interesting statement when he chooses to make a library.
Paige_Niedringhaus:
Mm-hmm.
Travis Waith-Mair:
Anyway.
Paige_Niedringhaus:
Yeah. But yeah, so kind
Travis Waith-Mair:
Hahahaha
Paige_Niedringhaus:
of going back to where
Tj_Vantoll:
Ehh...
Paige_Niedringhaus:
we were several questions ago, you were talking about how, how it's currently
Travis Waith-Mair:
Yeah.
Paige_Niedringhaus:
built and how you
Travis Waith-Mair:
Oh,
Paige_Niedringhaus:
extracted
Travis Waith-Mair:
how to transition.
Paige_Niedringhaus:
it. Yes.
Travis Waith-Mair:
Yeah. So yeah, so I, it started off as like, let's just like, let's just build it as its own thing as if the other thing didn't exist. Obviously I built it before, so it was definitely informed, but it was like, let's build this on its own. And it's, as it's evolved, we can get into some more details about how, how I've gotten about it using like the Avomet and all that. But now that I've built it in isolation, it's now informing the other packages and I've revamped and restructured. So they now complement each other more and it's informed backwards actually, is interestingly enough. Instead of what I would have assumed was if it informed the way I built the library, but it's in fact done the opposite.
Tj_Vantoll:
interesting.
Paige_Niedringhaus:
So,
Tj_Vantoll:
So,
Paige_Niedringhaus:
oh, go
Tj_Vantoll:
good.
Paige_Niedringhaus:
ahead. Well, one question that I have, because I'm thinking about how styled components work in a typical react application, which is they're written in the same file as the JSX and the JavaScript and everything else. So how did you, how did you take that and make it into a pure CSS framework? Is it kind of like, I don't know, like tailwind or like bootstrap where classes have particular properties assigned to them, and then you just kind of combine them in whatever. framework you might be working with.
Travis Waith-Mair:
So that's very interesting. The part that came along for me was trying to figure out what was the API gonna look like in this because I didn't wanna lose this component prop-like API that I got. I really liked that where you can say, hey, this is... of this layout component, here's some props that configure it and just get you to exactly the right thing. But the class based system was never like, it really kind of, I didn't really enjoy it. For A. I've always looked at Bedrock as not a complete library in itself and never will be. It's always going to be complementary to somebody else's design system or somebody else's library. So if someone's adopted Tailwind or something like that, I don't want to have collisions with their class names or things like that. And that's really hard to do with just class names without some type of like... like library or some type of build tool that will enforce that my class names will be unique, whatever. But I don't want to enforce some type of build tool. I wanted people to just drag and drop and just use it with static HTML potentially at this point.
Paige_Niedringhaus:
Mm-hmm.
Travis Waith-Mair:
So that was one big requirement. And then, yeah, those are the two biggest requirements right there is what I wanted. And that's where I stumbled into... this Avvo method, I've said it a couple of times, which is a method created by Michael Chan. He now works for Chromatic Storybook, but used to do the React podcast speaker. But he
Tj_Vantoll:
Yep.
Travis Waith-Mair:
is the, I'm also having a brain freeze of what the object, attributes, verbs, and objects, is what that's supposed to stand for. It also
Paige_Niedringhaus:
Okay.
Travis Waith-Mair:
is somewhat of a. forced way to say avocados. I
Tj_Vantoll:
Heh heh.
Travis Waith-Mair:
mean, it's not totally, obviously, this is true, but it's just like every acronym, that sometimes it's a little forced, so that way you can say the thing that you want. But it focuses on using attributes instead of class names as selectors. So that by itself gets me almost guaranteed no collisions because people are probably not using attribute selectors. And if they are, they're probably not using data bedrock center as their attributes
Tj_Vantoll:
Alright.
Travis Waith-Mair:
left.
Tj_Vantoll:
Good.
Paige_Niedringhaus:
Probably not.
Travis Waith-Mair:
So I have like 99% you know, guarantee that I'm not going to have collision with anybody else's class names or whatever that happens in the future.
Paige_Niedringhaus:
Mm-hmm.
Travis Waith-Mair:
But the other really nice thing that it allows me to do is enforce the modifier. So in a typical class name kind of thing, you'll maybe have like a button component, for example. So you'll have like BTN as your class name. I think everybody does BTN. I think it's like guaranteed that you have to use BTN as your class
Tj_Vantoll:
Hehehe
Travis Waith-Mair:
name. And then if you want to modify, you want your primary button, you have another class name with BTN dash primary or something like that. And then using your typical BEM conventions. But you can enforce that people won't just use BTN primary without the button. It has a dependency on the class name, but you can enforce that as the library author. You just have to hope that they're using things correctly and then, and stretch that out that like, then you can in your class names, there's no reason that any of them have to be right next to each other. So you could have BTN, hero. some other like class name and then at the end they put it on btn primary and then you lose that like that coupling of what that they're supposed to be together
Tj_Vantoll:
Yeah.
Travis Waith-Mair:
and so that that's definitely that's kind of an api didn't want with bedrock but instead of using that by using attributes i can give those attributes values and select on whether those values exist using either like the tilde you know, equals or even just like a wild card, depending on how like big of a, whatever I'm trying to select, I can actually like enforce that that attribute and the modifier are like coupled together whenever possible.
Tj_Vantoll:
It also seems like a way of cutting down on just the craziness that can happen in a class
Travis Waith-Mair:
Yeah.
Tj_Vantoll:
attribute. Just because with Tailwind getting popular and such, sometimes you look at class and it's just like, it's ballooned out, right? It goes like 200
Travis Waith-Mair:
the
Tj_Vantoll:
characters off into the wilderness because you're adding six things,
Travis Waith-Mair:
You've now lost
Tj_Vantoll:
which can
Travis Waith-Mair:
every
Tj_Vantoll:
make it
Travis Waith-Mair:
context of what that was supposed to be at that point.
Paige_Niedringhaus:
right.
Tj_Vantoll:
Yeah, well, it's hard to just mentally parse because you're looking at it, it's just this like dump of classes. And so at first glance, I kind of liked the approach just because it's just more like data primary equals true, data color equals yellow, I don't know, these are poor class names, but right, like
Travis Waith-Mair:
This
Tj_Vantoll:
all
Travis Waith-Mair:
is
Tj_Vantoll:
your normal things you'd put in, like some class names, just you can come up with a more, like, I don't know, I'd say like developer friendly. way of it almost feels like you're setting attributes on a component versus just a slew of class names.
Travis Waith-Mair:
Exactly. Well, and that's exactly what this, it gives that same API feel that developer experience that you get, like you were saying, that I, that you get with the React component library, but by using just CSS. And so it's been a great, yeah, way to handle that, that prop like API that you get in, in a purely CSS library without any build tools, without any other dependencies.
Tj_Vantoll:
It also reminds me of back when I did some native development, a lot of the components you work with there, like, cause there's no CSS on like native iOS or Android. So you do things like say border equals and you write, it's not a, it's not like style equals border colon. There's just like a border attribute on the component itself and, you know, same with all the other CSS like properties. So this feels a little bit more like that. And I say that as like a positive things. I think it. It does make it more. parsable, readable for developers.
Travis Waith-Mair:
Yeah, and the really nice thing is, yeah, you get that same context of like, this is a layout component. This area is doing layout. It's doing something and here's configuration, but you can still use all of your class names and have all that be over there and give some other context. So it can still be a hero or whatever it is that you're using for your conventions. But also... Like you can see your hero is also doing some other layout. And you don't lose that in the context when you're looking at just the HTML, that your hero also has these layout kind of things going on at the same time.
Tj_Vantoll:
Yeah, I think like the one tricky thing, like I could see mixing and matching them being a little bit weird, but I like since this is coming from a framework, it sets it aside also as like very clearly, this is the stuff the framework's doing, and then I can reserve the style for my own whatever, because presumably I'll need to make some tweaks on top of bedrock for colors or whatever else I'm doing.
Paige_Niedringhaus:
Mm-hmm.
Travis Waith-Mair:
Exactly 100% and that's exactly why I wanted to like try to do whatever I could to avoid collision So you didn't have to worry about whether my framework you're gonna collide with my framework by adopting it as you start doing your own unique styles or using whatever method it is That you're using tailwind. That's the way you want to go. It's not going to It's almost 99% sure that it's not going to collide with your class names because it doesn't use any class names
Paige_Niedringhaus:
Yeah, that seems like a fantastic way to do it. So I guess one thing that some people might be listening if they haven't really gotten the gist of it yet is you can use this framework with any other CSS styling framework that you wanted to. It could be Tailwind. It could be Bootstrap. It could be like a design system library like Chakra or Ant Design. And As far as we understand it and you've built it, it will not be an issue. It will just be an extra set of utilities.
Travis Waith-Mair:
Exactly. That's what it's always designed to be the missing components of your design system. The extra things that just help you get that make your layout composition easier without getting in the way of what you're already doing.
Tj_Vantoll:
So how is the library done in terms of usage? I'm curious, like your motivation behind this, like is this just something that you're using personally and you're just happy to maintain it for your own purposes? Are you trying to build this so you can be acquired by Vercell and be
Paige_Niedringhaus:
You had to
Travis Waith-Mair:
I would
Paige_Niedringhaus:
use something
Travis Waith-Mair:
love to
Paige_Niedringhaus:
besides
Travis Waith-Mair:
be acquired
Paige_Niedringhaus:
react.
Travis Waith-Mair:
by Purcell.
Tj_Vantoll:
the... Yeah. Just curious, like motivation behind the project and have you seen growth? How has that been going?
Travis Waith-Mair:
Um, I have seen growth, but the motivation has, and I'm hopeful will always be because it's what I like to do. And that's ultimately like what I want. That's what I want out of it is just a community, just, and also to like just build my, continue to build my own skills, continue to give me another outlet. I love programming for work, but like you still, you don't get to control what you program for at work. You're always building something for somebody else, which is fine. That's we're a transactional society, but this is something I build for me. And so that's, I, I hope it will always continue to be that. And though, I guess if something for someone wants to pay me full time to work on it, I'm not
Tj_Vantoll:
Hehehehehehe
Travis Waith-Mair:
going to say no to him. I'm just,
Paige_Niedringhaus:
Ha ha ha.
Travis Waith-Mair:
but, or, or Netlify anybody out there who has all that VC money.
Tj_Vantoll:
Hehehe
Paige_Niedringhaus:
So how has the adoption been so far of both the original bedrock and now this new version of it? Is it being met in the community with positive, you know, positive feelings and a lot of people trying it out?
Travis Waith-Mair:
I get positive feelings. I don't get the sense that it's hitting a lot of people's production code, but I do get issues. I get people who come in and say, hey, we're missing this. When the React 18 update came out, I was surprised when a bunch of people were like, hey, could you mind bumping your peer dependencies to React 18? Because now my NPM is now complaining to me. And I was like, oh. there are people using this so that's nice yes
Tj_Vantoll:
Yeah
Travis Waith-Mair:
so maybe I should break it more and find out how many people are really using it that
Tj_Vantoll:
Mm.
Travis Waith-Mair:
but no no it in some ways I am somewhat I get somewhat surprised because there's not like this big community or people are like asking me a lot of questions but I do get people who will just come in and make up updates to spelling mistakes on the documentation
Paige_Niedringhaus:
Mm-hmm.
Travis Waith-Mair:
or things like that. When I spoke at React India, one of the MCs actually came and said, hey, I'll help you fix all your grammar. I was like, great, because I need all the help on the website.
Tj_Vantoll:
Hehehe
Travis Waith-Mair:
And he did a major poll request, fixed the entire website's grammar, made it actually use proper English. So yeah.
Tj_Vantoll:
Yeah, that's awesome.
Travis Waith-Mair:
So it's not like this major following, but yeah, there's some people out there who are adopting it and using it.
Tj_Vantoll:
It used to be a joke that like in big corporate environments, when you had some system that you weren't sure if anyone was still using it or if it was dead, you'd like turn it off for just like an hour, right? And just
Travis Waith-Mair:
See
Tj_Vantoll:
see if you get any like complaints or emails. And then if no one does, then just turn it off for a day. And then if you know, if then no one's using it, just completely
Travis Waith-Mair:
Then you know you
Tj_Vantoll:
access.
Travis Waith-Mair:
can keep it off, yeah.
Tj_Vantoll:
So I mean, there is some precedent for doing that sort of thing.
Travis Waith-Mair:
No, actually, it was kind of a nice relief feeling when the React 18 thing came out and people started, I started getting those issues. Hey, this stopped working on React 18 and all that stuff, so.
Tj_Vantoll:
Yeah, I've, cause I've also, it's, I don't know. It's, I feel like the hardest bump to get over with any sort of open source project is to get from something you just threw out there to get those like first few users in the door and using it. And I say this as someone who's put out a lot of like just junk, like
Travis Waith-Mair:
Hehehe
Tj_Vantoll:
my GitHub is basically like, uh, there might as well be tumbleweed, right? There's a bunch of projects
Travis Waith-Mair:
Hahaha
Tj_Vantoll:
and nothing really happens on them, but that's partially because I haven't put. much effort into them, but it's also because that is a real challenge to just start to get users and get a community because let's face it, there's a lot of, it's a joke, but there's lots of JavaScript frameworks out there. There's lots of CSS frameworks out there and trying to stand out from the crowd is difficult. So it's a testament that you're getting some usage and getting some community involved.
Travis Waith-Mair:
No, and I know there's some big ones out there that are going to take up all the air in the room. We've said it several times, bootstrap, tailwind. And I know it's going to be hard to even get a word in edgewise as far as community adoption. So I just feel glad that, like you said, I'm even at the table as far as usage.
Tj_Vantoll:
Yeah.
Travis Waith-Mair:
So.
Tj_Vantoll:
Well, maybe like, cause we have, I'm sure we have listeners that are using like bootstrap and Tailwind, maybe you could just speak a little bit on like just differentiating, right? Like why, if somebody's using that today or in there starting up a new project, like why would they want to consider bedrock layout? Like if they, if they have a background knowing those, those approaches.
Travis Waith-Mair:
Yeah, yeah. What Bedrock layout gives you is a way to quickly build some pretty complex layout in a responsive way without having to know a lot of the underlying CSS, without having to be an expert at that. And Well, and even if you are, you don't have to continue to rebuild the same thing over and over again.
Tj_Vantoll:
Yeah.
Travis Waith-Mair:
That was, even though I know how to do this, I still prefer to use these components over the actual raw CSS, because I can get something really out there really quickly. And it also changes the way I think about layout. I don't think of layout as the technology I happen to be using. I think about it as a layout pattern. And I think that's a good way to think about web layout. So for example, if I want something vertically centered and horizontally centered in a section, like you can think of all the different ways you can do that with CSS. Or you can just use a cover component which covers a section and vertically centers its children. And compose that with a center component which centers the children inside horizontally. And allows you to then potentially center the text as well. And if you think about those as different layout patterns, you can then start to parse and think about your application differently instead of what technology am I using, like what layout pattern do I want to use for this?
Tj_Vantoll:
Yeah, and I really like, I think your tagline about being like the low dash for CSS is, is quite good for this. Cause that's sort of how I think about it because I run into this, like if I'm you know, building a new page for a site or something like that, it's like, well, I, I know how I could do this with just CSS, right. But I would also be, um, looking up the flex box syntax because I'd never remember what it is. So I'd bring up the same CSS tricks page that I've viewed like 60,000 times. to look that up and I'd spend an hour doing it. And like, I could get it to work, right? Like I've been doing web development for a while, but also like I might end up with a mess in CSS that's like Flexbox syntax. It's not easy for people to read, right? Like in, to maintain, and it's far easier to see just a handful of class names. I think that sort of thing makes it more maintainable too. So if somebody just hops in, they don't have to like, oh, let's find where's the CSS for this and like crap, what does that Flexbox do again? It's far easier to just see like, oh, they brought in this framework. They used a human readable thing. And like, I understand what's going on here. The spacing is done by someone who's tested this and thought about it and not me just making up Ms or rems out
Paige_Niedringhaus:
Hahaha
Tj_Vantoll:
of the blue. So
Travis Waith-Mair:
I
Tj_Vantoll:
it's.
Travis Waith-Mair:
guess this is 15 pixel maybe it's 14 that 14 that looks good.
Tj_Vantoll:
Yeah,
Travis Waith-Mair:
Yeah,
Paige_Niedringhaus:
Oh gosh.
Travis Waith-Mair:
exactly
Paige_Niedringhaus:
Yeah. I'm sorry.
Tj_Vantoll:
yeah having like the mock-up lined up with the browser like hey, that looks good
Travis Waith-Mair:
Hehehe
Tj_Vantoll:
enough
Paige_Niedringhaus:
Close enough, right? Yeah, seeing something like center text or center children is so much more explicit about what's going on without having to dive too deeply and figure it out and turn stuff off and turn it back on to see what's going on.
Travis Waith-Mair:
Well, yeah, and also like TJ was just saying, like just I can read like what's going on in a component, but like if I have to read three or four lines to parse what's going on versus like a good function name, we'll just take the like basic JavaScript. If you have like, you can read three or four lines and figure out what's going on. But if the function name says get user, you don't need to go look at that. You can go, oh, this gets a user.
Tj_Vantoll:
Yeah.
Travis Waith-Mair:
It's the same kind of concept, yeah.
Tj_Vantoll:
And I think it benefits from, cause this, I feel like this is the thing that made Tailwind quite popular as well, is that all the things that describe the thing are right there with the markup too. So you don't have to like, have the CSS and the markup and do the mental mapping of like, okay, this is here and this is here. And like, oh, okay, that bit of CSS came from the global style sheet, which is over here. So let me, like, I'm doing like a puzzle in my head. And when it's all... right there, or at least the most important, like the layout pieces of it are all right there. It just makes your life a little bit easier.
Paige_Niedringhaus:
Yeah. And then I slap an important honest CSS class that I need to override everything that's already been set up.
Travis Waith-Mair:
Or you fool yourself and go, well I'm not gonna use them porn because that's bad, so I'll just use like three class names so I get extra like, you know, specificity on mine.
Paige_Niedringhaus:
Yeah.
Travis Waith-Mair:
And then someone else goes and
Tj_Vantoll:
Ah.
Travis Waith-Mair:
uses five class names, so they'll override yours. Ha ha ha. Ha
Paige_Niedringhaus:
I don't know, I define an
Travis Waith-Mair:
ha
Paige_Niedringhaus:
ID.
Travis Waith-Mair:
ha.
Tj_Vantoll:
I did end up in a situation the other day where I was bringing in CSS that was just third party stuff and they had used important in theirs. And so like, it just becomes like an arms race, right? So I had to out important them, like, cause then I, it's the first time I've ever ran into this, but if you can't override an important, but your important has to be more specific, the specificity matters. And it's just at that point, it's like you start to question your career choice. Like maybe, maybe you should start up a farm or,
Paige_Niedringhaus:
Dink ditches,
Tj_Vantoll:
I
Paige_Niedringhaus:
yeah.
Tj_Vantoll:
don't know. Exactly.
Travis Waith-Mair:
100% yeah it's just like who can win the important and specificity battles and that's that's when you just go put everything in line because then you always win right oh except for important except
Tj_Vantoll:
Yeah, you might have to do important inline, yeah.
Paige_Niedringhaus:
Oh, so I guess one question that I have, Travis, is how did you come across this Avvo method? You said that Michael Chan, who's very verbose on Twitter, Chan-tastic is great if you don't follow him already. He does drop a lot of good knowledge, but I had never heard of this, honestly. So, you know, how did it come to light for you and what made it click that this might be the right way to go for bedrock?
Travis Waith-Mair:
It was actually like I had originally found some of these clips, like, and it solved it. I initially used it to solve a problem with the library when it was still just a React component library, because I needed a way to have like, um, specifically in the columns component. There. It has like, it has two different components for it. There's the columns which allow you to do like your typical bootstrap four column layout or whatever like that. And then I needed some way for you to like wrap your individual parts and say this one takes up, you know, spans four columns or this one spans only one column. But I needed a way to make sure that you could do that without having to like. like use a lot of like react stuff and and that's when I found out you could like I started learning about data selectors and I just was googling things about like different ways to like guarantee selection and I found just happened to find a YouTube video of him doing these attribute selectors and then eventually found out he also wrote some blog posts and stuff about it but at that point I just use it just to solve that one problem and then it came back to me as I was like Decided hey, I want to make a CSS version of this and I was trying to try to find different ways and I'm like Yeah, there was this attribute thing Maybe I look into it a little bit more because I only looked into it enough just to solve that one problem Then I was done just like all of us like I saw my problem. I'm done. I don't need read documentation anymore
Paige_Niedringhaus:
Right?
Travis Waith-Mair:
fine
Paige_Niedringhaus:
I stack overflow copy paste and move
Travis Waith-Mair:
Yeah,
Paige_Niedringhaus:
on.
Travis Waith-Mair:
I don't need to read the other comments I figured out my solution that no and started really understanding like is real value, understanding that like... attributes have the same specificities as class names and so really really getting into the the nitty-gritty with that and it was it was interesting because it solved a problem for him he's working on a design system at his old company but he needed to have a design system that worked on not just the web but also dealt with old ruby code as well as react code and he had a need to have an easy quick way that you can copy and paste back and forth between them and the unfortunate React.jsx is that you can't copy and paste HTML as JSX. There's always your one-offs, your HTML fours, and your class names,
Paige_Niedringhaus:
Hehehe
Travis Waith-Mair:
and all these different things that are not really HTML, and so you can't 100% copy back and forth with. I think there's been proposals to fix that, but I think it'd be too hard for React to fix that anytime soon. And so I think for a long time we're going to deal with that unfortunate by-product of JSX.
Tj_Vantoll:
Yeah.
Travis Waith-Mair:
But anyway, that was his, that was what he needed for him. That was their solution. They built their design system around these data attributes so that way they can go back and forth between the two paradigms whenever they need to. And it just felt natural as I started trying to adopt it with Bedrock.
Tj_Vantoll:
Do you think it's an approach that would work for just anybody's just random web app that they're like if you know I'm work at company X and I'm starting up a new react app do you think it's an approach that you'd use for everything or do you think it's best sort of like scoped to like libraries like like you've written?
Travis Waith-Mair:
I think generally speaking is probably, yeah, scope for like very specific use cases like libraries or like your company's design system or something that's universal like that. I mean, it's like anything like when we double down on just one thing, you get some really good benefits, but you also get some negative things.
Tj_Vantoll:
Yeah.
Travis Waith-Mair:
And I don't, I think there's some potential, like if you just double down on attributes, you would just get create. as many problems as you have with by using
Tj_Vantoll:
You're
Travis Waith-Mair:
class names.
Tj_Vantoll:
trying to solve
Travis Waith-Mair:
Yeah.
Tj_Vantoll:
it.
Travis Waith-Mair:
So.
Tj_Vantoll:
The design system, though, is interesting, though. I could totally see that. I think it's a way of clearly almost showing which parts are coming from your corporate design system. So that's actually kind of fascinating. I could see that working.
Paige_Niedringhaus:
That makes a lot of sense because I've, I've worked in companies where we've had very understaffed teams who are devoted to trying to build a design system. And they're using something like web components because they want it to work with react and view and angular and all the other things that people are building. The actual teams are building their applications with, and it just, I've never seen it turn out well. So having something like that where you can add data attributes, that seems like a great. great solution.
Travis Waith-Mair:
No, I agree. And it is using the embracing the platform, but it's embracing part of the platform that people don't typically think about or use on a regular
Paige_Niedringhaus:
Mm-hmm.
Travis Waith-Mair:
basis. And so it's not like so many things like, and I'm a big fan of Static Component still, but you're still like, you're not embracing the platform at that point.
Paige_Niedringhaus:
Hahaha
Travis Waith-Mair:
You're using JavaScript and forcing JavaScript mentality to CSS framework. There's some good reasons why sometimes you need to do that, like with CSS modules, whatever, but sometimes you really just need to go and embrace the platform and use it, and not use it when other tools, when the platform is just as good.
Tj_Vantoll:
Well, it's funny because we used to use data attributes all the time in the jQuery days
Travis Waith-Mair:
Eheh
Tj_Vantoll:
because the DOM was the place to store things because you didn't have a library to do it. So I remember, man, this is bringing back some nostalgia, but yet
Travis Waith-Mair:
That was
Tj_Vantoll:
when
Travis Waith-Mair:
your
Tj_Vantoll:
with
Travis Waith-Mair:
state
Tj_Vantoll:
the...
Travis Waith-Mair:
library was the data attributes. Yeah.
Tj_Vantoll:
Yeah, your DOM was your state library. Exactly. Data-everything, you'd get six or seven of them go in. But yeah, nowadays that's sort of like with the advent of React and Angular and Vue and... whatnot, but those days are gone. I can't even remember the last time. Uh, it's had to have been years since I last touched one.
Travis Waith-Mair:
Yeah, but I think the last time I, before this, the only other time I did this was working on something with a table component. And I needed to keep track of what row I was on in a way that like, I could select it both with CSS as well as keep track of it with JavaScript. And that was the best solution I could find. And so like they come in handy one off, but yeah, nowhere near like what they used to be used.
Tj_Vantoll:
Yeah. Well, Travis, this has been awesome. Is there anything that we missed or anything you'd like to discuss that we haven't talked about yet?
Travis Waith-Mair:
Um, no, I had a really great time. Just glad I could like bring and share the updates with bedrock. Um, kind of roadmap where I'm looking to go potentially forward is now that this exists is I'm looking at potentially not getting rid of the stock amounts. I still think there's a lot of value to it, but like. keeping a parallel version that like the react, there's a react component that depends on the library, CSS library instead of style components. So that, that'll allow it to be more future-proof potentially as maybe things go in and out or style components, if it ever gets dropped, I can
Tj_Vantoll:
Yeah.
Travis Waith-Mair:
take it off as a dependency. So that's the roadmap I'm looking to go in. And if anybody wants to help me with that, I'm always looking for contributors or people who want to help me out Thanks for watching. Bye.
Tj_Vantoll:
Awesome. Where's the best place to go? Like if people want to start, well, first of all, if people want to start using the library, is it best just Google the homepage or we'll have it in the show notes. And then if you want to contribute, like what's, where's the best place to go for that.
Travis Waith-Mair:
Yeah, the GitHub is probably the best place to go for that. Just throw out an issue or a discussion, whichever one is easier. And yeah, that's the quickest way to get, start contributing or even just offering. Some of the biggest contributors haven't written a single line of code. to the website, but I consider them contributors because they've helped me really build out the library from just like, this is what the API is to becoming much more useful tool than it used to be. So whatever advice you can give or help out to build the library, I would appreciate it.
Tj_Vantoll:
Yeah, sometimes the best contributions, like in fact, I'd argue code is actually like the hardest thing to contribute and it's far easier to give, like you could give feedback, like open a discussion with feedback, I tried it and this is what I think, this is what I found. You get open, like documentation, if something wasn't documented, you could add it. Add a new section, send in a PR, those are usually the easiest ways to get started with any library in general, when you're trying to contribute.
Travis Waith-Mair:
100%.
Paige_Niedringhaus:
Or building examples, writing little blogs of how you used it. That kind of stuff to be able to look through and see how somebody else implemented it is so useful to me.
Tj_Vantoll:
Yeah, blogging about it, right, making a video, doing a Twitch stream, whatever the kids are doing these days, you
Paige_Niedringhaus:
I'm
Tj_Vantoll:
could
Paige_Niedringhaus:
sorry.
Tj_Vantoll:
make make TikToks on it. I don't know. Go for it.
Travis Waith-Mair:
Oh, I would love to see a TikTok on Bedrock. Yeah, I'm trying to figure out how you would do it. Ha ha ha ha.
Paige_Niedringhaus:
Ha ha.
Tj_Vantoll:
Well, awesome. I think this is a good time to transition into our PICS page. Do you want to kick us off?
Paige_Niedringhaus:
Sure, so something that I've really been enjoying this week is actually it's a longer running Netflix series. It's been on for I think three or four or five seasons maybe and it's called Drive to Survive. So if anybody, you know, Formula One seems to finally be sweeping the US like it has in Europe and South America and pretty much everywhere else in the world. And I think that a big part of it is due to this series which goes and tells you the stories who are driving for Ferrari and for Mercedes and Haas and all these other smaller teams that you've never heard of but are really you know part of the pack and it's it's really a lot more compelling than I thought it was gonna be to see the pressure that these people have on them the amount of money that they're being given to race you know essentially gigantic really expensive go-karts and it's it's a lot more fun and exciting than I thought it was gonna that is reality TV-ish, but also feels like there's a lot of story, because they did put a lot of effort into really making these stories and making these characters fully fleshed out versions of themselves.
Tj_Vantoll:
I'm a long time
Paige_Niedringhaus:
I would definitely
Tj_Vantoll:
Formula
Paige_Niedringhaus:
recommend
Tj_Vantoll:
One fan,
Paige_Niedringhaus:
it. I
Tj_Vantoll:
so I will
Paige_Niedringhaus:
think
Tj_Vantoll:
give
Paige_Niedringhaus:
you'd
Tj_Vantoll:
that a giant
Paige_Niedringhaus:
get a kick out of
Tj_Vantoll:
plus
Paige_Niedringhaus:
it.
Tj_Vantoll:
one. I will say the unfortunate side effect is it has made ticket prices for the US races like absolutely
Paige_Niedringhaus:
Ha ha.
Tj_Vantoll:
skyrocket because we were considering going to the race in Austin this year. Well, they had a race in Miami
Paige_Niedringhaus:
I'm sure.
Tj_Vantoll:
and like the average ticket price was like $700, $800. It was like, oh my, let's just start some, yeah. But it's a good series, so you should definitely check it out.
Travis Waith-Mair:
Hmm.
Paige_Niedringhaus:
Oh, ouch.
Tj_Vantoll:
My pick for this week is going to be Bytes, which is a JavaScript
Paige_Niedringhaus:
Yeah.
Tj_Vantoll:
newsletter done by Tyler McGinnis and the people at UIDev. It's awesome. It's just the writing is top notch. So it's become my favorite JavaScript newsletter to follow because it doesn't just present the biggest news, but it puts an entertaining spin on it. And I always look forward to it. So it's Bytes.dev, B-Y-T-E-S.dev, if you want to check that out.
Travis Waith-Mair:
I would also plus
Tj_Vantoll:
I know
Travis Waith-Mair:
one
Tj_Vantoll:
and I
Travis Waith-Mair:
that as
Tj_Vantoll:
normally
Travis Waith-Mair:
well.
Tj_Vantoll:
getting like an
Travis Waith-Mair:
It's the
Tj_Vantoll:
email
Travis Waith-Mair:
highlight
Tj_Vantoll:
about JavaScript
Travis Waith-Mair:
of my Monday
Tj_Vantoll:
is not normally
Travis Waith-Mair:
is to
Tj_Vantoll:
any
Travis Waith-Mair:
read
Tj_Vantoll:
highlight
Travis Waith-Mair:
that.
Tj_Vantoll:
of my day so it's testament to them that the writing's that good. Travis, what picks do you have for us?
Travis Waith-Mair:
I am, in just in context, my wife and I are big murder mystery fans. Old school Perry Mason murders she wrote all the way to Monk and everything. The newest
Tj_Vantoll:
Yeah.
Travis Waith-Mair:
one that we have been hooked on is Only Murders in the Building. They're on
Paige_Niedringhaus:
Ah.
Travis Waith-Mair:
season 2 and as of the moment this is recording they're only halfway through, I'm sure. It might be done by the time this drops. It is... amazing perfect the combination of Steve Martin
Tj_Vantoll:
It's like, isn't Selena
Travis Waith-Mair:
and
Tj_Vantoll:
Gomez?
Travis Waith-Mair:
Martin Short
Tj_Vantoll:
Yeah.
Travis Waith-Mair:
and I also have a brain freeze of her name. Selena Gomez yeah
Paige_Niedringhaus:
Yes.
Travis Waith-Mair:
like they're like that trio is hilarious and it's just I knew Martin Short and Steve Martin were great together but adding Selena Gomez is just like
Tj_Vantoll:
I've heard good
Travis Waith-Mair:
it's
Tj_Vantoll:
things,
Travis Waith-Mair:
like
Tj_Vantoll:
I haven't seen
Travis Waith-Mair:
a perfect
Tj_Vantoll:
it yet,
Travis Waith-Mair:
combination
Tj_Vantoll:
so I have
Travis Waith-Mair:
of
Tj_Vantoll:
to convince
Travis Waith-Mair:
like
Tj_Vantoll:
my wife
Travis Waith-Mair:
funny personalities.
Tj_Vantoll:
to check it out because she is not a murder mystery sort of person. So I gotta get her buy-in.
Paige_Niedringhaus:
Ha ha ha
Travis Waith-Mair:
It's
Tj_Vantoll:
Okay.
Travis Waith-Mair:
a good funny thing and it doesn't emphasize the murder mystery. Well, it doesn't not emphasize it, but it's also like for people who are just casual
Tj_Vantoll:
Yeah.
Travis Waith-Mair:
fans of just shows and it just happens
Tj_Vantoll:
Gotcha.
Travis Waith-Mair:
to be a murder mystery,
Tj_Vantoll:
Cool.
Travis Waith-Mair:
that's probably
Tj_Vantoll:
Well, Travis,
Travis Waith-Mair:
a...
Tj_Vantoll:
this has been awesome.
Travis Waith-Mair:
This is a good entryway
Tj_Vantoll:
Last question,
Travis Waith-Mair:
into
Tj_Vantoll:
if people
Travis Waith-Mair:
it.
Tj_Vantoll:
want to follow you and whatnot, what's the best place to do that?
Travis Waith-Mair:
I'm on Twitter at Travis Waithmare, one word, camelcase. Or,
Tj_Vantoll:
Awesome.
Travis Waith-Mair:
I also have a blog at non-traditional.dev.
Tj_Vantoll:
Was this been a lot of fun? You'll have to come up when you add the third variation to the library a year from now, you'll have to come back again so we can talk about it. Cause this is always a blast.
Paige_Niedringhaus:
Ha ha.
Tj_Vantoll:
Cool. Well, thanks everybody.
Travis Waith-Mair:
Let's make it
Tj_Vantoll:
Until
Travis Waith-Mair:
an annual
Paige_Niedringhaus:
Absolutely.
Tj_Vantoll:
next week.
Travis Waith-Mair:
thing.
Paige_Niedringhaus:
I like it. See you then.
Travis Waith-Mair:
See you guys.