Sundi Myint:
Welcome to Elixir Wizards, a podcast brought to you by SmartLogic, a custom web and mobile development shop based in Baltimore. My name is Sundi Myint and I'll be your host. I'm joined by my co-host, Bilal Hankins. Hey Bilal.

Bilal Hankins:
Hey Sundi.

Sundi Myint:
Hey, so this season's theme is Parsing the Particulars. Today we are joined by SmartLogic's own Harper Atlas and we'll be diving into the particulars of Tailwind from the perspective of a designer. Hey, Harper.

Harper Atlas:
Hey y'all, how's it going?

Sundi Myint:
Good. Every once in a while we love to do this where we bring on somebody from the SmartLogic team to come chat with us about a thing, but I think this might be the first time we've had a non-engineer, and I also think this might be, this might be presumptuous, the first time in Elixir podcast history where we're talking to a non-engineer. I can't say that I listened or seen the backdrop of every single Elixir podcast episode out there, but there's a very specific reason we want to talk to you about Tailwind. But before we get into it, can you tell us about yourself, who you are, who you are in SmartLogic, which cat is sleeping on the desk, the whole thing?

Harper Atlas:
Sure. As both of you know, but to everyone listening, I am Harper Atlas, I am SmartLogic's design team. I always find the question about, "Tell us about yourself," really difficult because I'm like a multitude of layers and all different things, but if I had to sum up myself, what I wrote down was, I'm a cat lady, I have two cats as mentioned by Sundi. The current desk cat is Lela, so if you hear sounds that sound pathetic, that's her. Although she's snoozing right now. I've been practicing yoga for 23 ish years. I'm a big old plant nerd. I think I have 32 house plants, although I did just give some away, so that number fluctuates. I am a tattoo collector, I have a background in the arts in all forms. I'm generally pretty silly. I don't take myself too seriously. That's all I got.

Sundi Myint:
Amazing. And how did you find yourself in the UX field?

Harper Atlas:
The short answer of that question is I wanted to retire someday, which is probably not the whole answer you're looking for. So the longer answer is that I had been working in varying aspects of the service industry. As anyone who has worked in the service industry knows it is a lot for many, many different reasons, and I started really thinking about how I wanted to find something that provided a creative outlet but was also supportive, something that I could have health benefits, that I wasn't reliant on my partner for and also something that would allow me to retire before I'm 75 ideally.
So I did a lot of both soul searching and internet searching and a fair amount of crying to find the right thing. Ultimately I discovered UX and it was like this beautiful aha moment where it just was like, "Oh, that's perfect." I have always been really interested in the how and why of things and why people do the things they do, how they think about things. Unknowingly have been conducting user research experiments forever. I won't get into those, but there have been a lot of them. And the more I have learned about UX, the more I have just really solidified my opinion that it is the perfect middle ground between psychology and design. And while I think dream jobs are actually just a product of capitalism, that UX is pretty darn close.

Bilal Hankins:
So did you go to a boot camp program or could you talk about that?

Harper Atlas:
Yeah, I went to a UX program, it was at the time Lambda School, it has now been rebranded to Bloom Tech, and I was in their fifth of what turned out to be 10 cohorts of their UX program. It was a... program kind of fluctuated because it was still in beta, but I ended up being a nine to 12, 11 and a half months. It felt like forever. I was intense intensive where I was in school from on Pacific Time on the east coast, so I was in school from 11:00 AM to 8:00 PM Monday through Friday for a year. And I learned about all things UX. We also did a unit, so I think it was a month long, around front end code, which is where I first learned about Tailwind, which we can get into a little bit later. But yeah, I did the bootcamp thing and then volunteered and worked for teeny tiny stipends for about a year and a half before landing here at SmartLogic.

Sundi Myint:
Cool. And then just to give everyone a frame of reference for what your day to day looks like here, can you kind of walk us through what that looks like?

Harper Atlas:
Yeah, that's also a question that I thought for quite a while on, especially because this is an agency and we have a multitude of clients. My day to day can look very different, but if I had to sum it up into a TLDR generalization, it's a decent amount of research, both looking at competitors and what our clients have shared with us. Usually there's a chunk, to be really technical about how I split up my time, there's a chunk of learning, whether it's about new Figma tricks or design trends. I spend a lot of time thinking about accessibility and inclusive design over just accessible design and playing in Figma, whether it is putting to use the things that I've just learned or tweaking old designs, playing in FigJam, I spend a lot of time in Figma. And meetings, of course, that's also a decent part of my day.

Sundi Myint:
And for interested parties, maybe not me because I'm supposed to know what this is, but let's just say I know what it is, what is the difference between Figma and FigJam? And don't say toast.

Harper Atlas:
That's a great question. I was not going to say toast, that would be Owen's job, but alas he's not here today. The difference between Figma and FigJam, I'm sure there is an official definition, I think of it as one of them is an actual design tool, which would be Figma, so that's where I do wireframing, prototyping, the whole nine yards and then FigJam is more of a digital whiteboard, so I can do a lot of user flows, sketching out. It's meant to be a playful space that is iterative and collaborative. So that's how I think about the two.

Bilal Hankins:
I use FigJam a lot after Harper showed me, I think we just did one 30 minute... you weren't even showing me how to use it, but I was like, "Hmm." so now I have FigJam for what clothes I want to buy upcoming.

Harper Atlas:
That's a great use of FigJam.

Bilal Hankins:
I'm trying to reinvent my wardrobe. And I was like, "I want to arrange it in certain ways." I have my jackets right here and my line to... It's amazing.

Harper Atlas:
I would love to see that, Bilal, at some point, judgment free. I would just like to see, I think that sounds really interesting. I have a friend who used... started in FigJam and then used Figma to plan out how she was going to arrange her new house, she rented an apartment and she needed to figure out how big of a couch could she get, how would it fit in the space. And so she used Figma to figure that out, which I think is a great use of it.

Sundi Myint:
I think we should all do an exercise where we use FigJam to put together some kind of board of something that's interesting to us. I thought about doing something like that for my fall decorations, which I didn't, I just went for, and I kind of wish I planned for it because I spent so much money at Michael's.

Harper Atlas:
To be fair though, your fall decorations are on point.

Sundi Myint:
Thank you.

Harper Atlas:
You're welcome.

Sundi Myint:
They will be the same fall decorations for the next decade.

Harper Atlas:
I mean you got to use them every year. You may as well get your money's worth.

Sundi Myint:
Absolutely. So I think we're well primed to talk about Tailwind and know where you sit within our ecosystem. We're talking about Tailwind today, partially because we use it, we being this team that is on the podcast right now, which is an interesting kind of dynamic because the hosts and Harper, we are a development team. We work together and to this team together has been working with Tailwind, so that's part of it. Another part of it is Elixirists far and wide love Tailwind. Tailwind is being baked into the new versions of Phoenix, which we just heard at Elixir Comp 2022. And I mean it's such a integral part of our ecosystem that people have roped it into acronyms. The PETAL Stack, if you've heard that, the T in PETAL is Tailwind. So it's integral now and so I really wanted to hear from you, Harper, from a designer, what is Tailwind all about? What's its secret sauce? Why do designers like to use it? Why do they maybe not like to use it? The whole nine yards. Wherever you want to start, take it away.

Harper Atlas:
Oh man, that's a loaded, choose your own adventure statement. I had no idea about Tailwind being baked into the new Phoenix things. I'm pretty... not intentionally dissociated from that side of things, but it is... I think of it as languages. So there's like developer language and there's designer language and there's PM language and we're all a little bit bilingual. But dev things are not my native language by any means. I really didn't... like I've known about Tailwind

Harper Atlas:
For quite some time, I am married to a software engineer and so I have heard a lot about development and software engineering and all kinds of jobs for many years. But I didn't really get into knowing about Tailwind until I was in school when we did that coding unit where I learned about Flexbox and learned, I played a mean game of Flexbox Froggy and we learned about Tailwind and Bootstrap and got to use it. I can no longer play a mean game of Flexbox Froggy, we'll leave it at that. Please. No one challenge me to it. I will lose. Or if you want to feel good about yourself, do that and then you can win and feel great. But I think in terms of thinking about Tailwind from a designer perspective, there are a lot of things that make it great and a lot of those things are a double edged sword.
They make it not great. The first thing that comes to mind is that it is highly customizable, which is wonderful because you can use it for all different types of apps like products, all different purposes. There's a lot of things that are just commonly used in terms of components. But on the flip side of that, it's highly customizable. That makes it really challenging because you can customize it in a lot of different ways. Everyone, as we have learned, the three of us learned on a project together recently, you can write the Tailwind code in slightly different ways. And so it can lead to all kinds of, we'll say surprises that no one was anticipating. But one of the things I really like about using it, at least at SmartLogic is that because I am the only designer here, and even if I wasn't, it takes a lot of the heavy lifting out of the initial process.
I don't have to do as much for handoff. When I am done with designs, it's much easier to communicate with developers in my experience, at least here because that is a common language and I can link to specific Tailwind components. And there are a ton of resources out there for, both for developers and designers using Tailwind. And that's something I really like about it. Anything where I can do less work for the same outcome is a win in my book. And I really like that there are more concrete guidelines for developers and designers, but at least from my perspective for developers, that I then don't have to write how things should interact. And so that one less thing for me to do and I really like that about it.

Sundi Myint:
Yeah, I think when we were working on this most recent project one super helpful thing on the developer side was to be able to look at a design you had created, see that it needed to use this Tailwind component. And you had actually just linked to the Tailwind component documentation, which I think that's the one thing that people talk about the most from the developer side of using Tailwind is how great the documentation is. We talk about this on an earlier episode, I think it was with Mark and David from Thinking Elixir, we were talking about how David just goes to the Tailwind component to look up a CSS rule all the time. And I was like, Wait, even if you're not using Tailwind? And I think he's always using Tailwind, but he was just talking about how the documentation's so great.
And yeah, it was really great to be able to kind of go to that documentation and know exactly what button you wanted or what card or what table or. And it was great to start from something and to see what you visualized and to have a template of what was the correct structure code wise. And it takes a lot of the guesswork out of that whole situation. I think the most challenging part of slotting that in is understanding those components around each other. So I can put a button right underneath a form, just like you said and just like Tailwind said, but once we put that together, the padding is 16 pixels off. It's just like maybe it's not quite there.

Harper Atlas:
Yes, I will say about that though that both of you and really everyone at SmartLogic has done a wonderful job working with me and I'm pretty pedantic just as a personality trait, but that's also part of what makes me a good designer. At least I think I'm a good designer. I can toot my own horn for a minute, but I really enjoyed working with both of you on like, Oh, this looks about this many pixels off. And one of the cool things about the most recent project for me was, that we all worked on was that I learned I am actually really good at visualizing, like looking at something and saying, This is 16 pixels. It needs to be 24 pixels, or this is 200 pixels wide and wasn't really relevant to any of you, but it was really fun to see like I know what this many pixels looks like. That was a neat thing for me to learn. That doesn't matter to anyone else, but it made me feel cool.

Bilal Hankins:
Yeah, piggybacking on kind of sort what Cindy said, the Tailwind docs, I feel like I learned a lot of CSS rules that I didn't know were a rule or didn't know how to do. Also, coming from working with more component style design libraries instead of actually with Tailwind working with the CSS, I feel like that's a big benefit of Tailwind I feel like just knowing how to actually control the dom using the CSS rules instead of Box. And I didn't get to do the Flexbox Froggy and learn CSS, so I really appreciated that about Tailwind.

Sundi Myint:
It's not too late Bilal, it's still there. You could go to flexboxfroggy.com right now. It's there. [inaudible 00:15:49].

Harper Atlas:
It's definitely not too late.

Bilal Hankins:
So Harper, can you talk more about what all goes into a developer handoff? You mentioned it a couple times so far.

Harper Atlas:
Yeah, I think a lot about the developer handoff, so I sure can talk more about it. I was thinking about this question earlier today while I was mentally preparing for this. And it definitely varies or handoff varies depending on the company and the team. I have learned at SmartLogic to be much more flexible in terms of how I format my handoff. It really depends on the team itself. If I am working with a team of more junior developers than my handoff is going to just by nature of communication styles be more detailed, more specific, I will probably spend a little bit more time making sure that everything I can possibly think of being needed is there, which is probably something that I can revisit and maybe don't need to do, but that's my own adventure.
And then if the team is more senior, I am a little bit less detailed because, or if the team is more familiar working with Tailwind or we have worked together multiple times in the past, then they know what to look for in my files and I know exactly what they need in terms of communicating it to them. In a perfect world though, I always have a page in my Figma for detailing colors and their uses, the type scale, so fonts, typefaces, sizes, how they're used. If I'm using drop shadows, I usually include those specifics. Sometimes I get all the way down to these are the corner radii plural, I always want to say radius's, but it's radii and I feel silly saying it every time. But down to the corner radii, If there are multiples, then I will have what those are.
And then in most handoffs, whether it's a junior team or a senior team, I will include notes on specific interactions. For example, a project we worked on recently had views for both mobile and desktop. And I made sure to note that on mobile when you click on this particular text input, it pulls up the native numpad keyboard because we have all had the experience of you go in to type in your zip code or whatever, phone number and it doesn't pull up the number and it's just frustrating.
It's like one extra step that realistically is not that much effort but drives me up a wall. And so I will include notes like, this should be this way on this size screen or this break point. And then depending on the interaction, I might include a quick prototype to show this is how this hover state looks or this is how this particular interaction should work. Another thing I have done is doing a screen recording of something I found somewhere on the internet that showcases what I am trying to convey that isn't necessarily the same thing, but I really struggle with writing out my thoughts. I spend entirely too much time thinking about is this conveying the point? If people are going to get confused, if they are going to get confused, how are they going to get confused? What are all the potentials? Which maybe also plays into why I'm a designer because I do think about all of those things, but I find that a screen recording and just talking through my thought process is much easier for me so I will do that and embed those in Figma as well.
And then if I'm working with Tailwind, which we are a lot and is what we're talking about today, I will also have a link to, these are all the Tailwind components that I'm using. Here's an example of how they are used. And then I will also document if there are custom components that need to be built. These are the custom components, here's an example of how they work. But like I said, it really depends on the team and how detailed. I always err on the side of more detail than less and it's an ever evolving process.

Sundi Myint:
There's one part that we added to our process this time that I absolutely love. It's the, Tailwind has a specific

Sundi Myint:
... like color scheme, where if you wanted to use the Tailwind red, you could type in BG-red-500, and that's like a medium scale red for them. But the scale goes from 50 to 900, and BG is like background, but there's also button. You could also do outline, or focus ring at the beginning. There's a formula to it, and you can create your own schemes. And so, if you wanted to, you can work with your designers, like we work with Harper, on saying "Okay, this app has five main colors." So you can say App-blue. The Acme Corp is always the example, so Acme-Blue-500 would be the Acme Company's group. Am I saying Acme right? You say it too many times in a row and you're like "Is this correct?"

Harper Atlas:
I think it's correct.

Sundi Myint:
The anvil that goes on the roadrunner's head? Acme.

Harper Atlas:
Yeah, sounds right.

Sundi Myint:
Okay. I think I just completely told everyone what age I am exactly based on the cartoons I watched as a kid. Acme-blue-500, and you can install that. And what we worked together to do, me as a developer and Harper as a designer, was talk about what I needed as a developer to get to a place where I could add that to my Tailwind config file, and get those exact values into my theme.
Then Harper laid it out, and then the cool thing that Harper did with Figma was put in the actual names of the app color. When I clicked a color and a design that had a button, I was like "Okay, the hover state of this button is..." I'd click it and it would say app-something-100. I was like "Cool, that's the name I'm going to call it in my code." It just makes it so much easier than finding the X code, looking it up, finding its translation, putting it in. This seems like such a first world problem, but seriously it went so much faster once we established a theme. I really don't know what people do on Tailwind without a designer. I don't.

Harper Atlas:
Shenanigans, just all monkey business. I do think Sunday you touched on a really good point of, if I format components and styles in my Figma file that it makes the handoff easier. I think at the end of the day, regardless of how you format a dev handoff, it's just about finding common language and ways to bridge the gap between developer island and designer island.
Eventually, whether it's, for a while we kind of just had carrier pigeons and that would go across, and over the year that I have been here, I've seen us evolve into, first it was smoke signals, and we had carrier pigeons, and we had a row boat. Now, I feel like we're slowly, there's a bridge there, maybe not a permanent installation, we're working on it, but we are actively making going from design island to dev island, because realistically they're in the same world, we're all on the same team. We're all working towards a common goal.
And I think the handoff is just about finding common language and ways to speak different languages in the same way. I don't know if that made sense, but I think you touched on a really interesting point that if we can just communicate of, "Hey this is what I need." "Cool, that works for me," or, "That doesn't quite work for me, this is how I would do it." Then really, the TLDR of everything in humanity is just communication. But that's just really big picture.
But I think it's been really interesting for me, anyway, seeing how we have, both as the three of us working together, and me working with other people at Smart Logic, working with clients, just finding common language so that we can be less confused. Because the world, existence, humanity, is just kind of confusing all the time. And if we can just make it a little bit more enjoyable at work, where we spend the majority of our time, then I'm all for it.

Bilal Hankins:
This developer/designer bridge you're talking about is definitely very helpful. Present when this past project, that was my first time working with Tailwind on a project, and so just the stuff that Sunday talked about, such as setting up the themes, I feel like when an engineering manager like Sunday connects with a designer, that makes it easier for me, who has less experience to come and hop on the project and just, "Oh, okay red 500, red 600." It's very easy to catch up and catch up to speed.

Sundi Myint:
Yeah, it's always nice when there's a little bit of a system to follow. I was jokingly saying I don't know what developers do without designers when they're using Tailwind, but I'm actually really curious. If you're listening right now and you want to tweet at us how you're using Tailwind, I'd love to hear this. Are people just using the Tailwind components to build an application, just using their best guess? Or are they utilizing UX design, a team of designers and such, to put together something that they follow?
I'm really curious about this, mostly because you're right, it could totally be the Wild West. I think I've made design decisions where I had to add something. Like the code necessitates... I had to add a spinner, because I was waiting for the response of something. There was nothing I could do as an external API. We knew it was going to take a noticeable second for the data to show up. And so, our tech lead said, "Hey, add a spinner." I added a spinner and then I got design approval, but I made that decision and I felt like it was in the Wild West. I was like, "Do I put it in the button? Above the button? Below the button? Is it a big spinner? Is it a spinner that's white when it's spinning or purple when it's spinning?" There's so many options.

Harper Atlas:
It is kind of the Wild West. Also, for the record, you did a great job. You picked, at least what I saw, I don't know if that was your first try, but what I saw was great, you were like, "Is this right?" I was like, "Yes, great." Chef's kiss. It was the easiest one.

Sundi Myint:
Even better.

Harper Atlas:
Oh, that's always the answer. It was the easiest one to do, especially when you're at the end of writing a feature, everything's done, but the data's just a little slow, and somebody says, "You got to put a spinner there." Oh, no.

Sundi Myint:
Yeah. I'm very curious what everyone else is doing. Please shout us out if you're listening and you want to weigh in on the conversation, because it's an interesting time now. People truly love Tailwind. I'm also wondering too, asking questions into the void, what people who are doing using the Pedal stack. I think that's Phoenix, Alpine, Tailwind, Elixir and Live View. I believe that's correct.
I think people are finding less need for Alpine right now, now that Live View has had certain updates in the last few versions, but I haven't looked into it too heavily. But yeah, I'm so curious what everyone else is doing. But everyone's so all in about Tailwind. Are there some features that you actually don't like about Tailwind, that you wish were not there? Or is a limitation of some sort?

Harper Atlas:
That's a really good question. Big shrug emoji. I was thinking about this earlier. I think about Tailwind a lot, and one of the things I don't like about Tailwind is partly, I think because it ties into, that it is highly customizable. And making design decisions, even if it is your job, but especially if it's not, feels like the Wild Wild West. And my observation is that people tend to just lean towards the defaults.
And realistically, the defaults are great if you want to build an app or a website or a product or whatever it is that just looks halfway decent, even good or great, dare we say, which, all of these metrics are pretty arbitrary and means something different to everyone, but if you want to make a UI that makes sense and looks decent, basic Tailwind is a great way to go. But because it's customizable and intimidating, at least for me, once I notice Tailwind, I start to see it everywhere.
And it feels a little bit like the Baader-Meinhof Phenomenon, which I had to look up what that was called today. It's when you learn something or you notice something and then you start to see that thing everywhere. So for example, you buy a white Subaru, and you're Sunday, and then you're driving around and you see the same white Subaru everywhere. When I was in school, one of my capstone projects was supposed to be Google Maps, but it ended up being MapQuest for people who travel in RVs, speaking of saying how old you are based on what you reference, and because I was spending a lot of time talking about RVs and researching RVs and talking to people who lived in RVs and traveled in RVs, I started to see RVs everywhere. I didn't even drive that much and I would still see six a day.
And so it Tailwind becomes my version of the RV at this point, and I'd just start to see, "Oh, that is Tailwind, and that is Tailwind, and that is Tailwind, and that's slightly customized Tailwind." And that's something that actually really frustrates me, is I'm like, "Can I just not see it everywhere all the time?" But there are also some limitations, in terms of, at least for me, I don't don't know if, great example is on the last project we were working on together, we were building a CMS, and there was a filter for a table, a data table. And I wanted one part of three different Tailwind filters. And so in the design, it's easy for me to just combine those three things and pick and choose or cherry pick what aspects of that component that I want to use. And if I remember correctly, it was

Harper Atlas:
Not that easy for the dev team to do that. And so I think that that is really the biggest limitation that I don't like about Tailwind is that it can make it challenging to customize beyond a certain point.

Sundi Myint:
I did in fact have the white Subaru phenomenon after I got the car. Thank you, Harper, for calling that out, which is wild because there were not many Subarus on the market at that time because they were all taken. Well, I guess that would mean that they're on the road. Yeah. Okay. Fine. Fair. We walked through that one, around it, through it, the whole thing.

Harper Atlas:
Yeah. The Baader-Meinhof phenomenon. I looked it up, so that I could have the official terms.

Bilal Hankins:
I was about to ask what that is. But yeah, I feel like I saw Tailwind just in a whole bunch of websites I go. I guess since I started working, I guess I started noticing. But I didn't know it was Tailwind until we started using Tailwind. And I was like, "Oh, must be a cult going on or something. Everybody..."

Sundi Myint:
I think the same phenomenon happened when Bootstrap was released however many moons ago that was. I feel like every project was a Bootstrap project. Yeah?

Harper Atlas:
Definitely. I saw a lot of Bootstrap for ages.

Sundi Myint:
Yeah. And when we finally decided to go completely Tailwind, we had a nice little project of ripping out Bootstrap. And I didn't... This is a hard way to describe it. I felt like the app was lighter in the same way that you feel lighter after you get a haircut. The app just was lighter. There's no reasonable explanation to why you feel lighter when you get a haircut because it's really not that much weight. But the app really just didn't run so slow.

Harper Atlas:
Yeah, that makes sense. Also, there was a project we were working on, I don't even know how long ago because time is a big old flat circle and just a concept at this point in existence. But the app had been running on a really old Bootstrap 2 or something. It was real old. And then just there were a couple of pages that got shifted into Tailwind, and just that little bit of elevation made a huge difference. And yes, also getting a haircut objectively makes you lighter because science reasons.

Sundi Myint:
Are there any particular asks you have of developers listening in for when developers are working with designers, when the designers are working in a Tailwind space, is there any tip you can give them, any bits of advice, designers to developers, things that they could do to be more helpful and such?

Harper Atlas:
That's a really good question, which I have said about all of your questions, but I especially mean it about this one. They've all been really good questions, but this one really, it's great. How many times can I say really good question? At least a few more. I think it really just comes down to communication, that figuring out, talking early and often about what do you need, what are things that can be helpful? And this goes both ways. It's not just the designers asking the developers, what do you need? Because all relationships are two-sided, it's all a give and take. And the dev, designer, it is a relationship. It's no different than any other. And there have been a couple of times that... A great example was Sundi and Belal.
Both of you have done this where you're stuck on something and you can't get it quite right and you're just like, "Hey, this is where I'm stuck. These are the parameters I'm working in. Can you help or provide any input?" And for me anyway, having that communication of this is something that you're stuck on or this is something that has been consistently been a friction point throughout different projects, if that's not communicated to me, I don't know that that's a friction point and I am not going to change how I do things. Vice versa, if I'm doing something that is a big old friction point or the devs are doing something that's a friction point and they don't communicate it to me, they can't change their behavior. I think I said that right. I might have just said the same thing twice. I don't know. You know what I mean. But yeah, just communicating early and often.
Another thing that I have been thinking a lot about recently and just in general is having a mutual definition of done, knowing that, to me, done is in a perfect world to be nothing is off by even one pixel and it's beautiful all the time and everything is a joy, but that's not reality. That is just frequently not possible or not worth the amount of effort it takes to do it. And so having a very clear definition of this is how far we are going to get X page or the button interaction or the alignment, whatever it is, and just having that conversation early, revisiting it, and being really open to feedback, both giving and receiving. Some of the things that were hardest for me to hear as a designer from developers have also been the most rewarding, must've been the most rewarding feedback I've received. And yeah, just communicate, talk to each other. You're all human. That's really the best I can do. I think that just remembering we're all people and talking to each other with compassion.

Sundi Myint:
Yeah. It's like the 80/20 rule where it's 80% try to do the whole thing the way it's positioned in front of you, which is for the developer and for the designer, where it's 20% is flexibility, where you take that feedback and that pushback and try to work with it. And the reason I say 80/20 is because the 80 is you're trying to get to the design in front of you. But from a developer standpoint, maybe Tailwind components don't play together. You've designed it in a way where they don't actually do that when you put them both on the screen. So the 20 is, "Okay. Here's the flexibility piece. How can we work together to come to a conclusion that is not what you designed and not what I developed here, but it's something that we both can live with?" I think that that part is key and that is what you have to do together a lot, which might be a foreign concept to some people listening because they might not be working with a designer and they just get to put whatever they want on the screen Tailwind component-wise. That sounds fun.

Harper Atlas:
Yeah. For that specific demographic, I think that a little goes a long way. So learning as a developer, learning just a little bit about visual hierarchy and dipping your toe into color theory, learning a little bit about typography, really learning enough to... As an example, if you're going to a foreign country, learning enough of the language that you can ask for directions and say please and thank you and order dinner. Learning just enough design language to be able to not only speak with your designers, but understand what they're saying. Same with designers, we need to learn enough about, if not, how to code about the parameters of code and the restraints.
And so if you are a developer, you don't have a design team, you're using Tailwind, just learn a little bit about visual hierarchy and how people's brains work. I'm sure many people have read it. There's a really great book called Don't Make Me Think. And it's all about how people think about things and how users will interact with a product, but from a developer perspective. It was really useful for me when I read it because I don't think from a developer perspective by nature of that I'm not a developer. And so that was really helpful for me. And yeah, it's really just don't put 900 buttons on a page that are all different colors, like the button parties. As much as they look like fun, they are confusing.

Sundi Myint:
What if each button gave you a different party parrot? Party dead? Party dude?

Harper Atlas:
That would maybe be acceptable if that was the goal of it.

Sundi Myint:
Party talking parrot?

Harper Atlas:
Yeah.

Bilal Hankins:
Party Jay-Z on a jet ski.

Sundi Myint:
That one, too. That one, too. Oh, my God. I feel... Recovering. So with that, I feel like you did just actually answer my next question, which is, did you have any final asks for the audience? Which you just basically did a developer call out, but do you have any other final asks or plugs for all of our great listeners out here?

Harper Atlas:
Good question. Another one. It's my answer to all your questions apparently today. Like a politician, except I'm not. Yeah, just talk to each other. Be nice. Life's hard. Cut your fam a break. I don't know. Yeah. Learning a little bit goes a long way is really what I will leave this with. I'm not doing anything cool with my life right now other than working and hanging out with my cats, so I have nothing cool to plug.

Sundi Myint:
Well, we'll just take that as a subtle you're plugging this podcast that everyone's already listening to. Amazing.

Harper Atlas:
Yeah. Listen to this podcast that you already listen to. Tell your friends.

Sundi Myint:
Love it. Awesome. So that's it for today's episode of Elixir Wizards. Thank you again to our guest, Harper Atlas, for joining us. I'm Sundi Myint, and my co-host is Belal Henkins. Elixir Wizards is brought to you by SmartLogic with production support from Hangar Studios. Here at SmartLogic, we build custom web and mobile software, we work in Elixir, Rails, React, Flutter, and more. Need a piece of custom software built? Hit us up. Don't forget to like, subscribe, and leave a review. Your reviews help us reach new listeners. You can find us on Twitter at @smartlogic or join the Elixir Wizard's Discord. The link is on the podcast page. And see you next week for more on Parsing the Particulars.