R for the Rest of Us Podcast Episode 27: Garrick Aden-Buie

Important resources mentioned:

Connect with Garrick on LinkedIn, Bluesky and Mastodon. Visit his Website to learn more.

Learn More

If you want to receive emails to help you on your R Journey, sign up for the R for the Rest of Us newsletter.

If you're ready to learn R, check out our courses.

Transcript

[00:00:25] In this episode, I speak with Garrick Aden-Buie. Garrick is a software developer at Poit. In this conversation, we talk about a new project that he's been working on. It's called brand.yml. brand.yml is a way for you to make all of your output formats from Quato consistent. So whether you're making an HTML document, A-P-D-F-A website, a shiny app, brand.yml can make everything look consistent and on brand. Let's dive into my conversation with Garrick.

[00:00:52] David Keyes: I am delighted to be joined today by Garrick Aden-Buie. Garrick is a software developer at Posit and has been working recently on a little thing called brand.yml, uh, which I'm excited to talk with you about Garrick.

Uh, thanks for joining me today.

[00:01:09] Garrick Aden-Buie: Well, hi David. It's awesome to be here. Thanks for having me.

[00:01:12] David Keyes: Yeah. So, uh, brand.yml is a really interesting development. Um, and I am curious if someone has never heard of brand.yml, what is it? And like, what's the problem that it's intending to solve? I.

[00:01:28] Garrick Aden-Buie: Yeah, great question. I think, so in a really, really short nutshell, uh, brand.yml is a way to. Uh, to, to keep track of the colors and the typography and the fonts and the, the different styles that your. Brand uses, and by brand we mean something really general, like what your, whatever your company uses, uh, for its visual identity.

Um, and the goal is to put that all in one place and then get to use that, uh, for all kinds of different outputs. You can use that to style webpage that you create through cordo or web apps that you create with shiny or our markdown documents or PDF files or a, you know, a whole bunch of other things. So, um.

That's pretty much it in a nutshell, but it, it, you can see it's a lot of things at once, but, uh, at it, at its core, it's really just about being a file that holds information about what your brand or company should look like. And, um, and then having that in a structured format gives us a way to, uh, apply it in a bunch of different scenarios and, uh, make, you know, make your documents, your data science products look awesome.

[00:02:44] David Keyes: Well, I think about, I know historically, you know, the issue has been like if you wanna make a H TM L document from carto, you style it one way. And if you wanna make a. I don't know. PDF you style it in a very different way. Same, you know, if it's a shiny app. So is the idea to have kind of like one consistent, um, or one like one file that can style everything and not have to, to deal with the individual styling on, on unique outputs.

[00:03:12] Garrick Aden-Buie: Yeah, totally. And that, that, that frustration is exactly what we're trying to solve. I think, if you have wanted to make your report look great, or your website look great, or your app, your shiny app look great, or a plot look great. And by great I mean like look, like something that, uh, you know, your company would produce, you know, you'll spend a lot of time, you know, figuring out like, how are you supposed to do this in Latex?

And then how are you supposed to do this with CSS Oh, and not just CSS in general, but also like specifically CSS in Quarto. And then like, how do you do this in CSS over in shiny land and. You know, that kind of thing. And there's a lot of friction with all of that. Our goal with brand.yml is to have, is for it to be basically good enough theming to get you like in the ballpark for all of those outputs.

And you only have to do it once. So you, uh, you go to your brand guidelines, you figure out what colors you're supposed to use and what fonts you're supposed to use. You're gonna put them in one file and now you at least start from a place of all of your things look consistent. Your, you know, your PDFs look like your websites and your apps look like your PDFs and that kind of thing.

And, um, and, and from there, you know, there's always gonna be, you know, some like last 10 to 20% that you might need to do some customization and, and like really get into, you know, learning Latex or figuring out CSS or that kind of thing. Um, but our goal is to like. Make it be, uh, a place where you can, um, basically, you know, do that once, do that translation from your brand guidelines into, into a yml file.

Do that one time and then, uh, and then from there on it's, you know, things are, are pretty much good enough that you can, uh, just run with it and not have to worry about it again.

[00:05:00] David Keyes: So I, this was released several, several months ago. Am I remembering that correctly?

[00:05:05] Garrick Aden-Buie: Yeah, I think it's been a sort of slow process of, uh, you know, I think I started working on the spec about a year ago, so kind of. Uh, thinking about what brand DL should look like and, you know, what kinds of things we would keep in brand DL and like in that YML file and how we should structure it. Um, and then we, you know, spent a little while talking about that and kind of, uh, getting a sense of, you know, you know, having some discussions.

And then I, I think about, um. About six months ago-ish. Um, somewhere in that vicinity. Um, you know, both the QO team and I started working on like, let's actually bring this to, um, to QO and to Shiny for Python was the first place that, that I worked on, but it's now available in shiny in general.

[00:05:52] David Keyes: Okay. And talk, talk about the idea, like where did the original idea come from? I mean, I, when I saw it, it, I, it immediately resonated with me because we've, you know, worked on making outputs in multiple formats for clients. But I'm curious for you, what, what was the, kind of the mo, I don't know if there was a single moment or, you know, moments that led you to think this could be a thing that should exist.

[00:06:19] Garrick Aden-Buie: Yeah. Yeah. This is. It's interesting because this is one of the, the kinds of sort of intersectional work that is, that is difficult, you know, uh, in general open source. And, and this happens at, at posit too, where, you know, you have a, a couple small teams working on these really kind of detailed problems and sort of figuring out, like, you know, the Q team is, is really, you know, thinking a lot about, uh, you know, computational environments and, and making it easy to like to write in a bunch of different formats. And the, the shiny team's thinking about other things. The Tidyverse team is thinking about other stuff and to really kind of like have a vision to see how all, how we could like, connect all of these things through this one, uh, you know, themeing for all of these different areas through this one file.

And, um. It's interesting because I've, I've also had that experience too, you know, um, working in, uh, in, in a number of places, basically everywhere that I've worked, I've ended up creating some kind of r package that is, you know, theming for that company. And, um, and so like I've, I've just, you know, maybe it's the thing where you've gone through the pain too many times.

That you're like, I just, I don't wanna do this again. You know? Um, but really in this case, it was Andrew Holtz, uh, the, uh, a manager for both the Quarto and the shiny team, who was like, this is a great idea and it will, it will really help a lot of people. And, um, and, and then it was, it just aligned so nicely with, uh.

My past experience of trying to do this so many times for, in a number of different contexts and, and, uh, it's like this, it would, would be really nice, you know?

[00:08:01] David Keyes: Well, I also think about, um, you had a package sharing gun, the SharinganthemeR, I think it was called, or something like that. Am I remembering that? That name right? Which is kind of similar. I mean, that was obviously just focused on one output format, sharing gun slides, but it was the same idea. You know, it's hard to figure out the CSS two style.

Slides. I mean, 'cause obviously people working with data don't tend, you know, they're not front end web developers. Um, so you, if I remember, had like a, I dunno, things you put in the yml or No. You had, maybe you had a separate code chunk where you'd put your variables to define it. Um, and it seems like this is sort of like the, in some ways the kind of next generation implementation of that is that, is there a through line there?

[00:08:48] Garrick Aden-Buie: Oh, absolutely. I mean, that, that's part of the experience too. Yeah. So the package you're thinking of is, is called SharinganthemeR, and it was like a really, it's like this problem in, in a really small microcosm of, you know it, you have these slides that are super customizable because in the end you can just use.

You can, you know, I'm gonna say just in scare quotes 'cause it's, it's more than that, right? It's, but just use CSS to, to get it to look right. You know? And I, um, almost right away I was like, well, what if I just wanna give it like two or three colors? Like just, I want two or three colors. I wanna pick one font and then just have like, the rest of the slides just look nice, you know?

And, um, uh, and so that was the, like, the idea for that package, I think. You know, also it, it, uh, gave me the background of knowing that like, it doesn't end at two colors. Uh, you know, you, you do two color. What if I have two colors and this font, but then I want like this one other thing. So sharing a theme in the end has a lot of different options.

Um, and it, and it was basically like. It's, it's almost that package is basically parameterized CSS, um, which, yeah, I don't know, you know, now many years later, I probably would do things slightly differently, but the experience at least of, of putting together that package, um, definitely was something that I drew on heavily in, um, in thinking about how we would approach this for, for brand.yml, you know.

[00:10:15] David Keyes: that makes sense. Um. I actually wanna ask you about like what it looks like on the backend, but I think it would be more helpful before we talk about that, to have you actually show what it looks like to work with a brand.yml file. And then we can kind of maybe come back to a bit on the backend, which I think will probably be way more technical than I can understand, but I'm still curious to hear you talk about it.

So maybe first, let's have you, um, demonstrate what it looks like to work with brand.yml.

[00:10:44] Garrick Aden-Buie: Yeah, totally. I think, I think just before I get into that, I think one thing to, to kind of. Like set the context a little bit is that the idea is that you're going to like the, the problem that brand.yml is immediately trying to solve is taking your brand guidelines and turning them into structured data in the form of a yml file.

And we picked yml because yml is easy for humans to write, but also it's. Uh, it ends up becoming structured so that it's something that you can pull into in a programming language and, um, at its core brand-yml is really just a spec for how you should write that yml file. And then anybody can, once you've done that, anybody could start picking up a brand.yml file and say like, okay, I know.

That this, that people are going to put things in a certain place and I can use that, you know, so then Quarto can pull it in and Typst, you know, they can use it in Typst or they can use it in H TM L and Shiny can pull it in and anybody can pull it in. Um, so that's, that's the context that we're gonna start from.

So I have a project here where I have a couple things in this. I have an, a shiny app. I have a report that I've been working on and I have some slides. And since Shiny is sort of my home at Posit, I'll start with the Shiny app. So I have this shiny app. I've created in my head this fictitional company. it's a new mobile phone company that I'm calling Pulse Mobile, and it's sort of loosely based. This example in particular is loosely based on a talk that, um, that I really, really like from Rstudio conf in 2019, by Jacqueline and Heather Noli, where they talked about how they used a shiny app to convince their, you know, their stakeholders and their bosses that they needed some more team members and money to make this model work. They had this really cool model and they really needed to sell it. And they used the shiny app to do that. But they have this one point where they say in their talk that they spent a day theming their app to make it look more like T-Mobile, like something a T-Mobile app would look like.

And that that was part of what made it so effective. So here's an example app that has no theming, and it looks like a decent looking, shiny app. You know, it's, it's not bad. Uh, but it also doesn't have much. It's sort of like generic in the sense of it looks like mm-hmm. Most other shiny apps do,

[00:13:00] David Keyes: right?

[00:13:01] Garrick Aden-Buie: Yeah. Okay. So the goal is to make this end up looking like a nice Pulse mobile app. And so now you're wondering what does Pulse mobile do? Right? So I, um, I, these are totally, did you make this? Yes, I made up.

Okay, awesome. Easy fake brand guidelines.

[00:13:18] David Keyes: I didn't know you were a graphic designer too.

[00:13:20] Garrick Aden-Buie: Yeah. And a logo. And a color scheme. Yeah. Wow. So, so here, this is really common though. Generally, you know, in your company there probably is a set of brand guidelines. They probably look something similar to this, you know, and, um, they'll have, you know, some.

Uh, you stock photo images and they'll tell you, you know, a little bit about your company, which is also really there to kind of ground like how you should, uh, write about the company and, you know, how you should use the colors and that kind of thing. Uh, a lot of it is, you know, just sort of, uh, something you can kind of skip over, but it gives you a sense of like how you should feel about it. Right. And the, uh, the goal here in this company is that they are. Um, they believe mobile service should be as straightforward as texting your best friend, right? They're a mobile company that's targeting younger generations. Okay? So once you get past the marketing brand, personality kind of thing, you get into these sections that talk about that'll show you like the logo, right?

You have a, a logo here, I've got some icons. There's a bunch of variants. You can see there's like a colorful one. There's a black, there's a white one. under typography, you know, you have some fonts that have been picked out for you. This brand is gonna use Montserrat as their primary font, and then they've picked space mono as their like, uh, this, you know, secondary font.

And then they have a section on color. So they have picked out these set of colors that they say that you should use when you can. Right. this is where we're gonna start from. So we're gonna try to take these brand guidelines and turn them into a brand.yml file. To do that, I've run some code, that I'll will be part of the repo so that you can, you can do this, but basically the BS lib package, if you're using the latest version of BS lib from GitHub, we have an article on the BS lib page that like explains this unified theming through Brandi AML concept.

And there's also a little code snippet there that you can run and create a demo app. So I I'm gonna do two things. Before I start that, I'm actually going to, um, hang on, I'll go back to my, I'll go back to this app. Okay. I'm gonna create a new file. We're gonna call it underscore brand.yml. And this is the kind of the place where we're gonna put all of our brand metadata, right?

But I'm gonna, I'm gonna use the app to help me. So I have this, demo app that comes from the BS LID package. I just hit the play button, it'll start running. And I'm gonna switch back to this brand.yml file so we can kind of see, um, okay. And I'm gonna hide my sidebar so that we can have a little bit more space.

But, uh, the idea is that this app it's like a pretend dashboard, but it gives you a chance to kind of start playing with your brand.yml file and you can kind of see it in action. Right? Okay. So in a brand.yml file, there are four key areas. Uh, and we're, I'll just step through them individually.

Mm-hmm. So the, the first key area is metadata, and this is things like the name of your company. So the perfect place to start is the name. This company is called Pulse Mobile. So under Meta I use the name Key and I'll give that name pulse Mobile. And the other component that we have here is, you know, links.

So I'm gonna just make up a link for this company. They're [email protected] or something like that. I don't know. Okay. So, um, the other thing about brand.yml in general to keep in mind is that none of these things are required basically it's like whatever you want to put into the, your brand.yml file, everybody who uses brand.yml will just, you know, kind of assume like things may or may not be there. If it's there, then they can pull it in and start using it, right? So you can see like, I don't have any colors, so we're just using this like the default shiny theme here. And let me see if I can find, I'm gonna pull up the guidelines, where'd they go?

Okay, I gotta go open my guidelines again. So I'm gonna have those, ideally I'll have them like side by side as I work through this. Right. Okay. So colors are the most fun. So I'm gonna start there 'cause then you, we can kind of see this happen as we go. So that's, the second section is gonna be color. And here you have some choices basically.

So I'll show you the most simple thing you can do right now, which is under color, there are some theme ideas or some theme fields. Like primary is one of them. And here what I could do is I could give primary the hex code for purple, which is hard to see down here, but it is eight a two b, E two, I think.

And there we go. And so now you could see uh, when I finally filled that in, my primary color went from like the default blue to now pulse mobile's blue or purple. Sorry. Yep. Yeah. so color has a bunch of these theme variables. It's like primary, secondary info success, that kind of stuff. so you have a bunch of different options here. More likely though you're gonna want to start by making a list of all of the colors that are in your color palette, and then you're gonna decide which one of those get applied to which of the other theme colors, right? So these brand guidelines have these fun names, right?

So that's like, it's called Pulse purple, and that's our eight a two b, e two. And you could go through here and set up all of your colors. Mm-hmm. And then you could assign them here. So instead of having to repeat yourself, what you could do is say, primary is pulse purple.

[00:19:01] David Keyes: So you could define it in one place and then just use it again. Right.

[00:19:05] Garrick Aden-Buie: Yeah. The design of brand Yammel was intentionally done to like, make this translation from your brand guidelines easy. Right. Right. That. So most people will like get to the color section. They'll go, okay, what are the colors that I have?

And then you start writing out color palette and you give your colors names and then you'll say, how do I apply those to general theme colors, which are things that like Quarto and shiny would use. And if you do it in that two step process, things go a little bit better. Mm-hmm.

in general. It's like you can figure out what colors you have and then you make decisions about how you're gonna use those colors.

[00:19:40] David Keyes: Right,

[00:19:40] Garrick Aden-Buie: right. The other interesting thing is, um, in this, this app that I have, you know, it has a section that'll show you like all of your, kind of, your system colors.

And, you can see I have this primary is, so this is for Shiny or for like cordo for websites, basically. Mm-hmm. It'll kinda show you a preview of colors for both of them. Um, you can see this primary is, is purple, but Bootstrap has its own kind of purple color.

[00:20:08] David Keyes: Oh, does it make the shades for you?

[00:20:10] Garrick Aden-Buie: Yeah, this app will make the shades for you.

Ooh, that's

[00:20:12] David Keyes: cool.

[00:20:13] Garrick Aden-Buie: Yeah. Um, but you can see that this purple is not. This purple. Oh, that's, it's, I see it's close, but it's still the default bootstrap purple. So my suggestion is if your color palette. If your brand has fun names like Pulse Purple or Electric Blue or Mint Green.

Mm-hmm. Just skip the fun part of the name and call it purple. And when you do that now, you'll be able to use that purple color. Like it'll be picked up by Bootstrap, it'll be used in more places. And, um, and, uh, so to override

[00:20:47] David Keyes: the

[00:20:48] Garrick Aden-Buie: defaults,

[00:20:48] David Keyes: is that right?

[00:20:49] Garrick Aden-Buie: Yeah. Yeah. So in shiny and Quarto for where we use Bootstrap, we'll actually like take the color palette and try to plug it into as many places as we can basically.

I see.

[00:20:58] David Keyes: Uhhuh.

[00:20:59] Garrick Aden-Buie: Yeah. You can also do something where you like have aliases. So I could say purple is pulse, uh, my messages are getting in the way 'cause the, this thing is so big, but I could say pull, pull. I'm gonna type fast pulse purple. Don't stop typing and then pulse purple like that so you can like do aliases.

Um, I think you spelled pulse wrong on line seven. There we go. Yeah. So I made that mistake. Um, okay. But anyway. Cool. So then Theia, let me go find a, a version that I've already done and so that I can drop this in and we can just skip ahead a little bit. Um, I, sorry. One sec. I'm gonna need to re start that app?

Brand demo.

Okay. All right. here's an example where I've, gone through the pain of mm-hmm copying all of these colors over and I now have a full palette. Hmm. And from there, all I really needed to do was say that primary should be this brand's purple. Yeah. And that info for info, we should use this blue, you know?

And then after that Shiny has kind of picked up. I'm gonna zoom out just for a second so we can see a bigger version of the app. You know, shin's picked up all the colors. So these we have like success and danger colors, for example. Which are now pulling from green, yellow, and red.

But our app looks like it, it's in the vicinity of something that like Pulse mobile might use. Got it. We're getting there. We're getting close. We're missing typography though, so I'll jump to the next section which is typography.

So you just create another little section, top level typography. And typography follows the same basic pattern that we've been doing, which is like you have your brand guidelines open. You're gonna like think first, what fonts do I have and then how do I use those fonts? So the first key in typography is usually gonna be fonts.

Mm-hmm. And here you're gonna make a list and you'll say which fonts you have. So in this case, I'm gonna use, uh, this is gonna get annoying, so I'm gonna use RA alternates as the font family, the source of this. So to make it really easy, you can just use Google Fonts. Mm-hmm. If you need A-G-D-P-R compliant source, you can use a font service called Bunny fonts, which I really like.

Um, but I'll just stick with Google for now. And so I have Montserrat alternates. My other family would be Montserrat, which is the regular, and the last family that I want to use in my brand is gonna be space motto, and Source is also from Google. Okay. And then once I have all these fonts, they're not actually being used anywhere.

You can see that like the app hasn't updated in any way. They're not in use yet, but we would like to use them. So now just like we had colors that are defined by our brand guidelines and then we decided how to use those colors. We're gonna do same thing with fonts. so here I'm gonna say my base font could be Montserrat.

And as soon as I do that, you can see the whole app kind of updates mm to start using Montserrat as the base. For headings I'm gonna use Montserrat alternates and you can see like some things update a little bit. Mm-hmm. Mm-hmm headings updated. And for the last thing, for my monospace monospace font, I'm gonna use, uh, space mono.

And there should be a mono. A little bit of, yeah, you can see this now updated to be kind of cool. Nice.

[00:25:04] David Keyes: Um,

[00:25:05] Garrick Aden-Buie: yeah. Yeah, yeah. I mean,

[00:25:07] David Keyes: I think anyone who's ever spent time, I mean, I'm even thinking with the fonts, just like getting the CSS right to import your fonts, let alone thinking about how to apply them, being able to just say Source Google or Source Bunny is a huge time saver,

[00:25:21] Garrick Aden-Buie: right? Yeah. And then, uh, you know, this, this syntex of just like, here, here are the fonts. These are the ones we wanna use. Go ahead and use them, you know? Yeah. Saves a lot time. one other like design philosophy of brand.yml and you know, I mentioned like you can include as much or as little information as possible.

another design philosophy is flexibly letting you kinda start with basics, but also you can drill down a little more if you need to. so in this case it's hard to see, but the brand guidelines say we should use Montserrat alternates Semi bold for headlines. Hmm. If I go over to the here, um, you can kind of, this is a little, little example page that has some sort of like, you know, mark text really, that you can kind of get a sense of what your brand is gonna look like. So this format of like, heading is Montserrat. This is like the e the easy format where all you wanna do is change the fonts, but if you want to do more than just change the fonts, you can do that as well. And you do that by coming in and saying, you know, giving some, you know, keys underneath headings, for example.

Mm-hmm. So if it's just a string, it turns into family or you can actually go ahead and specify it all the way out, which then means I can also add other properties here. So I can say weight should be 500, which is a slightly bolder bold. Mm-hmm. There's a scale. Mm-hmm. Like 100 is really thin and 900 is, really thick.

so if I wanted like, you know, really bold, I could bump that up a lot, but our brand guidelines seem to want us to be here around 500. There's also a couple other things in here that you can play with. So there's monospace inline is another thing. And in particular that would be something if you want to use, um, if you wanna set the color of your inline code.

So here, I've, I've changed the color to purple and what's really cool is that we will actually, we'll see purple and then we will go look and see if that color is defined in your palette. And if it is, we'll use that color for purple.

[00:27:22] David Keyes: Yeah.

[00:27:23] Garrick Aden-Buie: Um, so this could also be green. And it's not just any green.

It's your brand's green. Brand green. Okay. Yeah. This brand green looks terrible, but purple looks cool. Yeah. And there's similar properties here for links and a couple other things. Got it. And there's, there are also more options under these properties as well, and they're all documented on the brand.yml website.

Cool. It's a great place to go figure all of this out.

[00:27:48] David Keyes: Yeah, and we'll definitely add a link, uh, in the show notes to that. Um, can you show, maybe you were about to do this, but I'm curious, I know there's also the logo, like adding logos. Is that, is that what you were gonna do next? Did I,

[00:27:58] Garrick Aden-Buie: yep, that's the next, the next thing, next and last thing is logo.

And here you can do this pretty simply, where again, there's like the easy way. And here I have, mm-hmm. I think I called it icon color dot png. There we go. There's only like one icon that I'm really gonna want to use for my logo, you could just put that one in here.

Um, of course, you know, we saw that there are many different variations, so I've stored them all in logos, in this logos folder, which happens to be right next to the, the brand.yml file. The underscore brand.yml file. Mm-hmm. So like I could, for example, uh, be like logo mark, medium color and switch to one of those other files.

Um, but there, there's a better way of doing this, which is to, uh, use images again, like before. Um, so I'll just, I'll call this like. Uh, it's sim this in, in this case it's similar to palette, right? Mm-hmm. Where you have images, you're going to name those images. and this is just sort of like a listing of your different resources.

So I'm gonna, I'm only gonna put two in here, but in real life, I would go through all of them and mm-hmm. and make, you know, like all the ones that I've decided I'm going to want to include with this brand, I'm gonna just like, put them all in in images so that they're. They're there and available.

Right. And, and they're kind of like, you would store them next to your, your _brand.yml file and you can use them. And then just like typography and color, you know, we have one, one section that's gonna hold like a dictionary of things that you know, right are defined by your brand and the other properties of this section are going to be things like consistent places to go look for these logos. So we have small, and I'll say for small, I want to use this color icon. Mm-hmm. And then for medium, uh, medium color, it would be like that. And basically what brand is going to do, although this demo doesn't do it, but what in general, what brand will do in Quarto or in, in Shiny in general when like this is a little bit in the, in the area of brand that we're still working on developing out for shiny. So it's like this is, this demo is sort of a, a preview of it Yeah. Is we'll actually like go look up icon color and replace it with the path that we're expecting so that it, it shows up and, um, yeah, and that's, uh, yeah.

So that, that's pretty much all like the four key areas of brand.yml. You just sort of like walk through this process of filling out your YAMA file while you're looking at your brand guidelines. And when you are done with that, then you have a brand YAMA file that you can use in a bunch of different places.

Um, yeah, so,

[00:30:44] David Keyes: so super cool. I can see how that can save a ton of time. The immediate thing I wondered was, okay, like this makes sense for one project. How do you apply this across multiple projects? 'cause like ideally you don't wanna recreate your brand.yml file multiple times. Do you have any thoughts on the best way to handle that?

[00:31:06] Garrick Aden-Buie: Yeah, I think, in general, the way that I would approach this is like to create a GitHub repo where I store my brand.yml file. And then, you know, you would put all of your, your logos and your assets in there, and then it becomes like one place to go look mm to like, figure out what your brand is.

We definitely have not solved the problem of like how you're gonna share brand.yml across different projects and that kind of thing yet. We wanted to get this out the door. We wanted it to get it. Sure. You know, it's a pretty big undertaking from a bunch of different teams, so we wanted to get it in people's hands so that they're using it and uh, it's a good problem to have like things to develop in the future. Right. You know? So it's definitely something that, that we're thinking about. And it's also one of those things where like different projects have different ideas about how you would package these things. You know? If you're working in R in general, you might create an R package, but in Quarto you would create a template or, an extension, maybe? But the vision that I have for what I would really like to see happen is that in all the places there are helper functions, that will like basically make it really easy to go grab in the same way that Quarto extensions work right now.

Like go out, find the brand.yml repo, grab all of the files and the resources, and you pull them in. That makes sense. And it would kind of work like you bring the source to you and then you have it. And then if you need to update it, you can, you know, um. Come back and update it, you know, later. But yeah, that makes sense.

It gives you like one place to like store all of those guidelines and those things and you know, as they change or as someone says, um, you know, hey, I realize like maybe we should be using this font weight or, you know, sure. As you find tweaks to things, you know, you might, um, you can like go back to that one place where you have your brand BLE and, and make that change.

And then, you know, you know, everyone can pull as they need.

[00:32:54] David Keyes: Yeah. What about, actually, maybe you're about to show this, but I'm curious, so we've talked about brand.yml, you know, and it applies to the styling of Quarto documents or shiny apps. What about things like data viz made with GG plots or charts or tables say, does it work with those, or if not, are there plans to make it work with those?

[00:33:17] Garrick Aden-Buie: Yeah, so first there's a couple different angles here. The first one is that in the R world, we have this really cool package called thematic, which I'm highlighting. So it has some functions that make it really, like if you're working in a, in a situation where you have BS lib, where BS lib is around.

Basically if you're in an R markdown document or a shiny app, you can use thematic to automatically take the theme from your document or from your app and apply it to a plot. Mm-hmm. And the way to do that is basically to just call thematic shiny, the thematic shiny function, or you call thematic on,

[00:33:55] David Keyes: um,

[00:33:56] Garrick Aden-Buie: I, I've added a little bit of code here to kind of connect the two. In this case I've told thematic shiny to pull out the font family from, from brand. Mm-hmm. And you can see I'm using like brand dollar typography, dollar base, dollar family. Right, right. Um, which in other words, like once you've like read in the brand.yml file into our, it becomes just structured data that you can use Uhhuh, uhhuh.

So if the connections are missing for something. That, like it doesn't exist yet. You can always make those connections yourself. I see. Um, on the other hand, I, this is something that I really both, uh, good defaults for ggplot and also, you know, making it really easy for you to use the logos in shiny apps and in Rmarkdown documents and that kind of thing.

Those are two things that are on the roadmap. Very much wanna see them happen and I'm looking forward to it, you know. But in the meantime, it's a couple lines of code to turn it on, basically.

[00:34:54] David Keyes: Okay. That's great. I'll, say personally, like we've had, we've been wondering about how, how best to do that.

So, um, that's perfect. Yeah.

[00:35:02] Garrick Aden-Buie: I'm working right now on an R package that reads in brand and does all of the, like, validation and normalizing and all of the things, uh, that you would need. So that. Uh, you know, like basically the, there's a lot of flexibility in brand yamo. It's definitely useful to have someone else like me, uh, write a package that reads it in, right?

And then you can just like, work with the validated, normalized version of it, and part of that package I see definitely it including something that would make it easy to turn on thematic and update your Gigi plot defaults and that kind of thing. So, it's definitely coming soon.

[00:35:36] David Keyes: Okay. That's good to know. Are there any other demo things that we didn't get to that you wanted to highlight?

[00:35:42] Garrick Aden-Buie: I could just show you really quickly. you know, we looked at a shiny app, but I also happen to have a quarter report here.

Yeah. And you can see from the top of this file, looking at the yml header, I haven't actually done anything to change the theme of this document other than having the underscore brand.yml file present in my project. Mm-hmm. The thing that we were just working on, just because it's here, I now get a document that looks like something that Pulse Mobile might put out.

[00:36:13] David Keyes: Right.

[00:36:13] Garrick Aden-Buie: And. Um, although, you know, okay, so I did change the colors of this plot to make it look better. Um, but you can see like the font. It picked up the fonts, it put in the logo for me. And I didn't have to do any of that work, you know. And similarly, I have slides here too that do the same thing where I have, you know, pretty simple slide deck and now it looks like a pulse mobile slide deck.

[00:36:36] David Keyes: Yeah. Cool. and it's all just literally that it's _brand.yml is the file and, and that just magically styles everything.

[00:36:45] Garrick Aden-Buie: Yes. Yeah. There's definitely an open question about how we refer to, to the project and the files and everything. here's my answer.

The project itself, I generally call it brand.yml or maybe brand dot yml, but brand.yml rolls a little bit better off the tongue. So that's sort of the spec and the design of the yml file. Um, all the projects that implement brand y will look for a magical _brand.yml file. And if it's present, then that project will pick it up and use it.

Like the fact that it's called _brand.yml is a signal that you're saying, I want you to use this file for just anything by default. And then there's always ways that you can have additional brand.yml files, specific ones you could have, you know, uh, like Brand Pulse or I could, you know, have a brand T-Mobile or brand at&t yml file.

Mm-hmm. Okay. And each of the projects gives you a way that you could say which file you, which specific file you want to use. And in those cases, I usually call those files brand.yml files.

[00:37:50] David Keyes: Got it. Okay. I was just specifying under underscore brand.yml to be very explicit so people know exactly what the file's called.

But yes, um. Con can be a little bit confusing in terms of how to refer to, uh, the project and the file and all, and all that.

[00:38:08] Garrick Aden-Buie: Yes, exactly.

[00:38:11] David Keyes: Um, cool. Well, feel free to stop sharing then, unless there are other things you wanna show and I'll ask the kind of general wrap up question.

so it seems like at this point, brand.yml is really powerful in terms of what it can do. I'm sure there are other things you're still working on. So can you give me a sense of what might be some of the limitations at this point and what you're working on in the future with brand.yml?

[00:38:33] Garrick Aden-Buie: Yeah. The biggest limitation is, is generally the, the question of how do I package up brand.yml in a way that I can like start sharing it across projects. so we've, you know, we've talked about that a little bit. Um, obviously we definitely wanna solve that problem or, or make it have a prescribed way of doing it that makes it easier because it is designed to be shared and to be shared across projects.

Um, and I think, uh, again, I think that Quarto's extensions are great um, inspiration for, or a great template for how we could approach that. So that's the, that's one of the big things. Um, we also, so with the initial release of brand.yml, there is a Python package, uh, that you can use to read and validate brand.yml files.

and my goal is that within the next couple of weeks, uh, hopefully by the time that you're listening to this, that it's also an R package that does the same thing.

[00:39:29] David Keyes: Mm.

[00:39:29] Garrick Aden-Buie: Um. And then from there, you know, definitely wanna see more integrations with, uh, with shiny, you know. Right now shiny does mostly theming aspect, but it would be nice to, you know, have really nice helper functions to make it super easy to drop your, uh, logos in, into your shiny apps.

Um, and yeah, there's a little, there's other things in shiny, but also, you know, I'd like, I'd love to see. Um, you know, more adaptations of brand.yml, you know, using brand.yml for map plot lib or seaborn plots, for example, or in plot nine. So that's in the Python side, but definitely also for Gigi plot, for regular plots, you know, the HTML widgets and things like that.

Uh, I'd love to see brand.yml being used and, um. I'd be super excited to see, you know, community integrations with brand.yml and um, yeah,

[00:40:26] David Keyes: Well, it seems like that's gets at, I mean, you talked earlier about wanting it to be sort of like a, a spec, um, that can apply across, you know, any number of places. So it seems like that's, that's sort of where you're driving towards if, if I understand correctly, right?

[00:40:41] Garrick Aden-Buie: Yeah, totally. Yeah.

[00:40:44] David Keyes: Yeah.

[00:40:44] Garrick Aden-Buie: Yeah.

[00:40:45] David Keyes: Um, cool. Well if people wanna learn more about, uh, brand.yml, what is the best place to go for that?

[00:40:52] Garrick Aden-Buie: Yeah. The best place is the brand.yml website, which is at, uh, posit-dev.github.io/brand-yml.

[00:41:02] David Keyes: Well, I'm impressed that you actually knew that you are. We'll put that in the show notes for people.

[00:41:08] Garrick Aden-Buie: Yeah. Yeah. Although I, I feel like you can get really far just by searching. You know, doing a Google or Duck Duck, go search for brand yml. And, um, there's also, um, on the posit blog, there's a really nice post by Sarah Altman where she went through, you know, a similar setup. Her her approach is a little bit more Python oriented, but, but the same idea, you know, working on a shiny for Python app and a quarter report in the same project.

And, um, and demoing that, you know, what it looks like to, you know, to have a project and add brand yml into it. And, uh, that, that blog post is great and I highly recommend it as a first intro.

[00:41:47] David Keyes: Great Well, we will make sure, uh, to include that in the show notes as well. Um, Garrick, thank you for taking the time to chat and talk about brand.yml. It's really exciting.

[00:41:57] Garrick Aden-Buie: Awesome. Thank you for having me. It's been a blast.

R for the Rest of Us Podcast Episode 27: Garrick Aden-Buie

Listen to the Audio Version

Watch the Video Version

Transcript

Let us know what you think by adding a comment below.