WDD LIVE 061: Tattoo Shop Website Critique + Q&A

0:00:00
Hey, everybody.

0:00:02
Welcome, welcome, welcome. It is another Tuesday, which means that it’s time for WDD Live. I need to get the right windows up. I got to get, as you can tell, we’re a little bit under the weather, but we’re going to fight through it. It may not be as long as it normally is, but I also said, you know, I’m going to be in

0:00:23
Italy next week. Like, we got to do it today. We can’t not do it today, okay? So, as much as I would like to do one in Italy, it’s gonna be the day, the morning after, significant amount of plane travel,

0:00:38
and time change, six hour time change, I don’t know if that’s, I can’t make any promises in that regard. So, yeah, this is probably not gonna happen next week, but we’ll be back in action the week after that. Let’s see who we got in the house today.

0:00:53
We got D123. Mark Zemanski is here. Steven, Nico, Nomadic, Patrick, Ruben, of course. Welcome, welcome. Charlie Sasser. Andre is in the house.

0:01:07
Two Rubens. Gavin and Vigilante. Evan, Simon. We got some new faces it’s fantastic I like it I like it I like it got a little tattoo shop website today that we’re gonna critique I was thinking about doing a I might pull it up I might pull it up we won’t we won’t do too much

0:01:27
of a critique on it or too much of a topical analysis of it but there’s an interesting video that was just recently posted by Adam, you know, Tailwind’s founder where he’s building a home page, a landing page kind of thing. With Tailwind, I think, you know, there’s some interesting insights to glean from that. One major insight, but we might pull that up and go through it a little bit. And then we’ll just do Q&A.

0:01:58
We got a lot of Q&A stuff to do. We didn’t do a ton of Q&A last week, so we’ll do more time for Q&A today. If you don’t know what we’re doing here with WDD Live, our main thing that we do is in-depth web design critiques, not just looking at the UX UI,

0:02:14
but looking at everything that makes a website successful, copywriting, we look at SEO, we look at potential for advertising, conversion rate optimization, we just look at the whole thing, the DOM sometimes, accessibility, semantics, literally everything that goes into the

0:02:29
work that we do, which makes it very, very educational for you. And it is, by the way, a participatory live stream. You guys can use the chat, chime in with your opinions and ideas and thoughts on the website that we happen to be critiquing. Usually we only do two website critiques. They’re like, you know, 30 to 45 minutes each, you know, because we try to go deeper than most people do. But today we will just have one because I cannot afford to lose my voice, as often happens when I’m sick. And I talk too much.

0:03:03
So and I just did a one hour podcast with layer WP. So we’re already an hour in my vocal cords are already actually like an hour and a half in to the game. All right, today. We gotta get right to it. What’s up, Zamir?

0:03:19
Kevin, Zamir says, hey, Kev, what’s up? What’s up, Zamir? I don’t recognize Zamir. Zamir might be new to the stream. If you are new to WDD Live, drop that in the chat. Just say, hey, I’m new here and say, what’s up?

0:03:30
Okay, I’m gonna go ahead and share the screen and we are going to get to it. Okay, let’s hide the sidebar here. All right, we’ve got Stone River Tattoo Company. First thing we do is a no scroll test, which means I’m not allowed to scroll around.

0:03:47
I’ve got to just see what I see and see if we can make sense of the place that we’re at. So I mean, the logo, it says Stone River Tattoo Company. So obvious that this is a tattoo shop. Got a nice clean navigation here about us, tattoo artists. All right, so there’s four artists, a gallery,

0:04:06
there’s an aftercare page, an FAQs, and a contact us. And then we have a main call to action of Get Inked, which I like because it’s got a little bit of personality to it. It’s not just like book an appointment, well, they’ve got the book an appointment here.

0:04:22
And actually, the juxtaposition between these two is good. You can use your little cute one, your little cute CTA copy, uh, up here because you have the literal copy right here. Uh, I’m guessing that those two things go to the exact same place. Let’s check. Let’s check. Yeah. Tattoo booking. Okay. I click this one. Tattoo booking, same place. Okay. It’s just different copy, which is good.

0:04:43
You know, um, this, if you’re going to do this kind of thing, which is very common, uh, this is an opportunity for you to use different copy on both buttons, even though they go to the same place. So do something like this. I think that’s a good idea. Tattoo Studio in the Heart of Edinburgh. So this is a very literal headline. If you’re looking to get bold, bright and solid tattoos, come visit us at Stone River Tattoo

0:05:07
Company, a private appointment only tattoo studio located at, okay. So you’ve got key details in the lead paragraph here. I wanna hone in on bold, bright, and solid. So very common in copy, obviously, you have to try to talk about the things that you feel are most relevant to the visitor

0:05:31
and that are going to capture their attention and their interest and their intrigue and make them really wanna buy, right? They went with bold, bright and solid. Like if I’m gonna get a tattoo, the question that this brings up is,

0:05:46
if you surveyed, survey says, right? If you surveyed a hundred people who wanted tattoos and you said, what do you want from your tattoo artists or what do you want from the tattoo that you are going to get? They’re all going to give you all these feelings and words and all of that, right? This be this giant tag cloud of stuff.

0:06:07
So my question is, would the words bold, bright, and solid be the largest words in the tag cloud? Okay. If I had to guess, probably not. Now I haven’t done this research. I haven’t done anything.

0:06:22
I don’t know anything about tattoos. I don’t, you see me? Even though I am, I’ve been in the jujitsu world for almost 20 years, where it seems mandatory to have tattoos, I have escaped with none. So I don’t know, I don’t know much about tattoos. But what I could guess is that bold, bright, and solid maybe are not going to be the biggest

0:06:48
words in the tag cloud. So this is an opportunity, obviously, to put the three words that are the biggest words in the tag cloud. What we need to do is find out what those are. Now, if you’re in the chat,

0:06:59
you’re in the, if you’re heavy in the tattoo game, okay, then let me know, you know, bold, bright, solid, does that resonate with you? Is that, would you say that this is a good copy? I, you know, I can’t even really judge it all that much because I’m not in that world, right?

0:07:13
So I’ll defer to chat here. We’ll defer to chat. But overall, like the structure of the copy is on point, okay? We just need to, we can make a little adjustment. Are these the three things that are really gonna capture the most amount of people?

0:07:26
Really, really get them off the fence. If it’s a no, then we need to change it. If it’s a yes, then we can keep it. Simple as that. Okay, I like the video that’s playing in the background. I’m not a huge fan of background videos,

0:07:41
but this is not distracting. And it’s, let me turn off the lights for a second because I got to look at the contrast here. So, you know, it’s a low contrast video, so it’s not colliding with the text, okay? It’s not making a poor experience,

0:08:04
and it’s showing a little bit of the action going on behind the scenes, and I see some people, and they’re smiling. Guy at work, he looks like he’s focused. You know, so it’s good. It’s a good little accent for this section, this hero.

0:08:17
Okay, let’s move down. We’ve got meet the team. Let’s see if anybody’s chimed in. Bold, bright, clean, maybe. Bold and bright seems like it would speak to a specific tattoo style.

0:08:27
I’m wondering if bold, bright, and solid might be the only style of tattoos that they do. Oh, see, I don’t even know. Are those like technical industry styles? Like name that? I mean, if that’s the case, then that makes perfect sense.

0:08:38
Again, I don’t know. That’s why I’m deferring to chat. Okay. Meet the team tattoo artists. Meet the team of our talented tattoo artists, each with their own unique style and expertise.

0:08:47
They’re passionate about creating art that you’ll love.

0:08:51
Okay, okay.

0:08:52
You know, it’s very common in the about, kind of about copy, that everybody just goes to me, me, me, me, me, me, me copy, right? But, you know, they kind of did that with our, but they immediately went to, so when you talk about the unique style and expertise

0:09:08
and their passion that you’ll love. Okay, so they are speaking to like the visitor, okay? This is you focus copy in this regard because they’re showing you why that’s important to you, okay? So that’s good there. And then, you know, I like this.

0:09:29
I can immediately tell now that this is a Frames Automatic CSS website. I built this section right here. So I can recognize it, I can recognize it. And this one as well. But they’ve done a really good job of, you know, embellishing this up. Like, you know,

0:09:45
I really actually am liking the tattoo examples, the artwork in the backgrounds. And again, it’s done very subtly and it’s, it’s here too. I don’t know if you guys can see the contrast on the stream, but they’ve got artwork kind of like as subtle background texture in all of these sections, which actually works really, really, really well.

0:10:07
Okay, Jake, traditional Japanese old school enjoys doing large projects. We got Manny, sketch, graphic, watercolor, color realistic tattoos, nice, specializes in bright bold. Okay, this is bright bold, okay. So that must be a very industry thing.

0:10:24
Graphic, illustrative, realism, fine line, specializes in delicate nature inspired designs. Okay, all right. We’ll go to their pages in just a second because those link out, all right? So we’ll see what’s going on there.

0:10:38
There’s another classic, you know, frames layout because it gives you the opportunity to put a lot of visuals, right, together in a nice little off base, off balance kind of collage kind of thing. So that’s cool.

0:10:51
Tattoos that age like wine. At Stone River Tattoo, we specialize. So I don’t, you know, you don’t need to repeat the company name over and over and over again. And you don’t even need to say like, we. So there’s a little bit of like,

0:11:04
too much me, me, me copy in here. So at Stone River Tattoo, we, right? They don’t care about that. They don’t care about that. Now, what you do have to do is deliver on the headline. So tattoos that age like wine,

0:11:17
what about them makes them age like wine? Just go right into that. You don’t have to reframe it as like, by the way, did I remind you that we’re Stone River Tattoo Company? Like, just go right into it.

0:11:28
Like, I’m already in, I’m already in. I’m on the, I’m staying here. So I’m interested in what you have to say, so just start saying it, right? It would be like if you were talking to a salesman. Like, you walk into a, you go to buy a car BMW and guys like

0:11:40
hey I’m Brad nice to meet you what kind of car are you looking for you’re like well I’m looking at the SUV and he’s like well I’m Brad let me show you this SUV over here and you’re like cool let’s go over there and look at it and you know what kind of you what are you looking for power you’re looking for roominess you look at what are you looking for oh well you know I’m looking for something for the entire family okay well I’m Brad what let me show you in the back of it.

0:12:02
See, it’s very awkward, isn’t it? Like, just tell me the things that were, like, have the discussion with me. You don’t wanna keep repeating over and over and over again. So, expert application, maturing your tattoos, age like fine wine, maturing gracefully with you.

0:12:17
The one thing is I’m not, it almost, you know, if you’re gonna call this out, it almost feels like there’s some sort of proprietary nature to what you do? I don’t know that you know do all tattoos what tattoos don’t age like fine wine? Let’s start there like you’ve got it you’ve got to

0:12:35
teach us you’ve got to tell us this juxtaposition is there an epidemic of tattoos that don’t age like wine? Why do yours? What do you do differently from those? And then I’m educated now. You gave me the headline so you kind of alluded to this that this is the case that not all tattoos are the same but you didn’t actually tell me how you’re different

0:12:56
okay so this is the paragraph where you need to actually deliver on the promise of the headline. Diverse tattoo styles whether you crave a bold traditional tattoo or a hyper realistic masterpiece Stone River Tattoo Company has you covered see there again hey I’m Brad hey did I mention that I’m Brad and I would like to tell you about this BMW. Okay, so just start removing these.

0:13:17
You don’t need all these references. Just talk to the person. Quality and comfort, we prioritize your comfort alongside quality. Getting a tattoo can be nerve-wracking. That’s why we created a relaxed, welcoming environment

0:13:27
to ensure you feel at ease. Let’s try to change one of these. So we can just give an example of how we would rewrite this, right? Okay. So right here, just start out with the pain,

0:13:41
the pain point, right?

0:13:42
Getting a tattoo can be nerve-wracking. Like if this is my first tattoo, I’d be like, damn, you’re right, that’s exactly how I feel. So just start out, just talk, that’s all you need to say right there, just start out with that.

0:13:52
And then you can go into, so you say that’s why we created a relaxed, welcoming environment, but you’re not, that doesn’t, you’re not describing the environment, you’re not giving me any detail to latch onto.

0:14:08
This is the difference between, like why is a good author of a, you know, a fictional story, why are they good versus some other author, right? If another author is just like, they just kinda paint this abstract scene

0:14:25
where you’re like, I can’t really imagine what’s going on there, but this other author just gives you those little details, where you’re like, damn, I feel like I’m in the fucking scenario that they’re talking about. That’s the difference.

0:14:36
This is what you have to do here a little bit. It’s very easy to write, yeah, we created a relaxed welcoming, I mean, what about it is relaxed and welcoming? What about it is different from other environments that you might find yourself in and attach to?

0:14:48
Like, let’s get a little bit of detail here. And this is why copywriting is hard. You have to get to that level of detail somehow without writing a novel. All right, so it’s gotta be this long, but it still needs some detail.

0:15:02
You see what I’m saying? That’s why copywriting is hard. But that’s what we have to get to. But then you can just take out junk that doesn’t need to be there. Like getting a tattoo can be nerve-wracking.

0:15:11
Just start there, just start there. And then go into some detail here on why your version of this is relaxed and welcoming. Okay, we got a big CTA strip going right through the middle. Ever dreamt of a tattoo that tells your story? Our experienced artists will work closely with you to bring your vision to life.

0:15:30
Ensuring a tattoo you’ll love for years to come, book your free consultation today. Start your tattoo journey. Schedule now, all right.

0:15:38
This is where I would probably,

0:15:39
I mean, you could do a little conversion rate optimization, a little A, B testing on the get inked versus booking appointment stuff. Where like, you know, schedule now is very cold. It’s very, you know, I think the get inked would actually work better here.

0:15:54
Like you’ve done a job of like connecting with them and getting them excited and then, okay, now, they get it, come on, come on, get inked. Like you’re part of us now, right? We don’t have to talk about all this like corporate, you know, schedule now.

0:16:08
I think now down the page, you can start using the get inked more. What our clients say, but again, you’d have to split test that. We can’t just like make up like that that’s gonna do better than what’s already there.

0:16:18
But these are things that you can try to split test. Okay, so we’ve got some, you know, testimonials. Cool, cool, cool. All right.

0:16:28
Um, little footer.

0:16:29
Nice, clean.

0:16:30
All right. Nothing crazy. Nothing crazy going on. Let’s go in and, uh, let’s, let’s go to, let’s go to about us first. Let’s just go in order. Okay.

0:16:36
Private appointment only studio located in 19 Easter Road in Burke, Scotland. The studio is run by us, Life and Business Partners, Jake. Uh, that is a name that is just going to trip me up.

0:16:39
Uh, really, really, really, really, really, really, really, really, really, really, really,

0:16:40
really, really, really, really, really, really, really, really, really, really, really, really,

0:16:41
really, really, really, really, really, really, really, really, really, really, really, really,

0:16:42
really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, Life and Business Partners, Jake. That is a name that is just gonna trip me up. Really making me work here. I’m not even gonna give it a shot.

0:16:58
I’m tapping, I’m bowing out of that one. We live in the local area with our two daughters and our dog, Soba. Okay, let me, I can actually zoom in here, make this a little bit easier for everybody. You know, what I look for in a section like this

0:17:10
is like why, like the why behind, why are you here? You know, what is your what is your mission? What is your passion? What are order? You know, what are you doing here, sir? What are you doing here? I’ve always worked a high standards professionals in create a well rounded high end tattoo studio. Same time is warm and welcoming. See, this is this is, you know, here’s what I know about like artists and designers and you know, things like that, right? You have two things that you could communicate here. Here’s what people don’t care about.

0:17:43
I mean, it’s a little bit nice to know that you have daughters and a dog, okay? It might be nice to know your favorite color at some point, right? But really people don’t care all that much about that. What they care about is your mission,

0:17:57
what they care about is your vision, and what they care about is your origin story. So you have the, pick one of those or, or blend them all together. If you want, if you’re good at writing copy, like you could really blend all of those things together.

0:18:11
But like, where did you come from? When did you get into art? When did you start drawing? When did you like, you know, give me some of the origin story. Give me some of your, like, why you started. It’s not like, Oh, well, it’s always been a passion of mine. Okay, I mean, but why? What is it about this that you really care about, that I should care about? And then I’ll care. So I think this can use a little bit of work right here. Then everybody’s got their bios. Okay, here we go.

0:18:49
We encourage a slower quality-orientated approach to tattooing where the artist will be able to concentrate on their unique artistic expression at the same time they’ll be able to choose and manage their workload to suit their lifestyles and commitments. Okay, so as a general philosophy,

0:19:09
I actually think that has a lot of value and I buy into that. What’s missing here is the juxtaposition. And you know, one of the big criticisms people will have in marketing is, just talk about yourself, just talk about the things you do, just talk about the great features of your thing.

0:19:26
Don’t talk about other things. But without the juxtaposition, there’s not a lot of impact. Because I am not, again, I don’t live in the tattoo world, so it should not be assumed that I know what goes on in other tattoo places. I’m naive. The only way you can educate me is to say, here’s what happens in all these other places. Here’s what happens in our place. Then I can go, oh, that makes total sense why that’s a difference

0:19:56
and why that would matter. Without the juxtaposition, I have no idea. So when you say you encourage a slower quality oriented approach, I mean, that sounds good, but my brain goes, but I mean, surely that happens everywhere, right?

0:20:11
Doesn’t that happen in every other tattoo shop? If it doesn’t, then you have to tell me, like you have to juxtapose, right? Otherwise I’m not gonna know, and my brain’s not going the place you want it to go. This is why you have to do comparisons.

0:20:26
Like in marketing, like comparisons is like that it has to be done. It’s the only way to educate people. So I would add some of that, right? Like, and again, this goes back to a lot of people’s mission in business is because they didn’t like the way things

0:20:42
were being done over here. Or they think that people getting tattoos deserve a better experience or deserve better quality or deserve better something. And then when you communicate that and just say like, hey, bro, I feel like you deserve better.

0:20:58
That’s why I’m here. I feel like immediately, I didn’t even say anything of specific, right? But immediately you’re like, I don’t deserve that. I wanna hear what you have to say, right? It’s a human thing.

0:21:11
It’s a human thing, okay? You do that in your copy. It’s very easy. The juxtaposition thing, the comparison thing, it’s not just easy, it’s essential. It’s essential to properly communicate with people.

0:21:23
So the people that are like, don’t compare, don’t contrast, don’t juxtapose, like, they don’t understand marketing. They don’t understand communication. If you were just a lover of a product. You’re not, and you want your best friend

0:21:41
to use this product. You’re like, dude, you gotta hear about this thing. Immediately, you, in your attempts to communicate why your friend should use this product, are probably, it’s not like other products. Let me show you why.

0:21:51
You already did it. You already did it. You just did it. You just did the comparison thing. You just did the contrast thing, okay? It’s not inherently, like, there’s this idea

0:22:00
that this is inherently bad or immoral or shouldn’t be done. Like this is just silliness, this is absolute silliness. Okay, there’s my rant about comparing in marketing. All right, let’s go into Jake here. Let’s see, I just wanna see what the layout of one of these pages is.

0:22:17
Okay, good. So we’ve got a gallery that is presumably Jake’s work. This is the reason why it’s a good idea to use CPTs, custom post types, because then when you loop things like this, you can create relationships. You can say, hey, I only want to query Jake’s stuff.

0:22:33
Now, can you do that manually? Yeah, but not as this thing scales, right? It’s as this thing scales, and there’s more and more and more tattoo artists, and more and more work to show, and maybe you want to do some faceting and filtering

0:22:44
of these things on a main gallery page and whatever, you’re going to want the relationships. You’re going to want the proper data hierarchy in the back end, and architecture, and things like that. But again, I’m not in the tattoo world, I can’t really judge these.

0:23:00
I mean, to my eye, they look fantastic. This one’s trippy as hell. That is confusing. But yeah, I think this is, first of all, it’s clean photography.

0:23:14
So that’s good. Puts the emphasis on the actual work.

0:23:18
It’s good. It’s good.

0:23:19
It’s good. It’s clean.

0:23:20
It’s nice. I like it. Um, okay. Got Manny in here.

0:23:25
Okay.

0:23:25
Clearly different style, different approach.

0:23:27
Um, okay. All right.

0:23:30
I, you know, this is important because if somebody’s gonna choose their artist when they come in, it’s not like, hey, give me whoever’s on staff, right? Like, you know, this is like, hey, who’s style do you like? Pick this person, come on in.

0:23:48
Again, I mean, I assume this is done in almost every tattoo shop. Here’s the main gallery right here, okay. So this is where, you know, main gallery page, I’d probably go with some fastening right like it is good that I can go to Jake’s page and I can look at Jake’s stuff but if I’m in the main

0:24:07
gallery I still kind of want to be able to sort and filter here that would be a good thing to add so maybe do a little bit of consideration of that here’s your main footer CTA notice this is probably part part of the yeah part of the no it’s not okay it’s not I was wondering if that’s part of the footer template or they just manually put this on every page. Yep, no, it’s not on every page.

0:24:33
Okay. See, I’m a big fan of, I really think that it’s good to have a global CTA attached to your footer. Like if we look at this footer, it’s just kind of the footer, right? And above that is just an about us CTA section.

0:24:52
But as this site gets bigger and bigger and bigger, you don’t want to decide on a manual, you’ve manually put that there now, and that could have just automatically been there. I did a video on a global footer CTA that you can toggle on and off,

0:25:06
depending on what pages need it and what pages don’t need it. I would look at doing something like that, rather than manually managing the CTAs that go, plus not to mention, like, you know, this is the same copy as another one,

0:25:24
but it’s a different design, and like, you know, if you ever change your offer, or you wanna do a special offer of some sort, you got a lot of little manual CTA blocks floating around that you don’t really have any global control over, that can become a problem on bigger sites.

0:25:38
So I would look into making that part of your template.

0:25:41
Here’s the FAQs, let’s see what we got.

0:25:43
Nice little sticky section there, okay. This is literally like a frames, frames we use on literally every section of this website. So I mean, it turned out great, right? It’s clean, it’s easy, it works. There’s some adjustments that can be made obviously to the copy.

0:25:59
There’s not a lot else to look at here because I mean it’s built with frames, so we know things are going to be clean on the DOM side of things. Any questions from chat? Anything you want to look at in particular? Anything that we haven’t discussed? Where are the Stone River Tattoo?

0:26:26
Okay, Top Tattoo Studio in Edinburgh. It looks like, you know, title tag has been taken care of. Yeah, I mean, it’s a good website. It’s a good website. It’s, it’s what a company, what like a tattoo shop needs. Not a lot else to say here.

0:26:39
Let’s see. By the way, if you’re putting questions in the chat, Let’s see. By the way, if you’re putting questions in the chat, you got to use hashtag Q or hashtag question. I saw a couple right off the bat when I looked at chat that did not use hashtags and those

0:26:54
will get lost. If you can pull in Google review photos of the tattoos, that’d be a nice touch.

0:27:02
How do I elevate this?

0:27:03
Let’s see. Okay, there we go. If you can pull in Google review photos of the tattoos, that’d be a nice touch. Okay, I get you from from okay yeah I get you that footer background looks sharp yeah it does I like it it’s a little bit pixelated maybe yeah might be or maybe it’s just

0:27:32
the fact that it’s like skin I don’t even know if that’s skin or it’s just maybe that’s what the tattoo was on the drawing. I don’t know. But yeah, they did a really good job with the background texture.

0:27:43
Let’s see, one thing I’m not seeing.

0:27:44
For most people, tattoos are a part of their ID. I’d expect to read things like, let’s talk about the right tattoo, we’ll create your unique tattoo together. I think you’re right. I think you have a really good point there.

0:27:55
I think you have a really, really good point. Like there’s an aftercare page, there needs to be a pre-tattoo page, right? I mean, some of this is in the FAQs, like does it hurt? Is it safe?

0:28:13
How to prepare? Here’s how do I choose the right tattoo design? But you’re right, this is in the FAQs, probably not the best place for this. I also think, okay, let’s go to the gallery. If you really want to take this to the next level,

0:28:27
which could also, if you worked it right, aid a lot in SEO. But each of these tattoos could be like, for people who want to go to this level, you can do like a mini little interview with them of like, how did they arrive at this concept?

0:28:42
Like, what does it mean to them? And just tell their story, really. You could do like little case studies out of some of these. Have a whole section of stories, right? That’d be kind of a nice touch, going a little bit above and beyond.

0:28:59
Get them on video, maybe. Good way to get some video testimonials going. You know, because text testimonials are great, but they only do so much in this day and age. And if you have a YouTube channel, you don’t have a YouTube,

0:29:14
but you have an Instagram. I mean, those videos can go on Instagram. Now you’re telling the story on social media. I mean, this just gives you a lot of additional content, a lot of additional marketing ammunition. Yeah, there’s a lot of stuff that can be done here.

0:29:29
But, you know, it’s what I already said. It’s from a website perspective for a tattoo company. It’s great. It’s exactly, exactly what a tattoo company would want and need. Okay. Yeah. The mini case studies is a great idea. You can show the prep, the outlines, all the stuff before in kids, the skin. Yeah, absolutely. Absolutely. I mean, think about like,

0:29:54
let’s let’s do a callback call back to when was this show popular? 2004? I’m terrible with dates. 1998, 2004, I’ll just throw out some random dates there. What was the show called with the, it was the Biker Show,

0:30:13
where they customized the motorcycles, and there’s a thousand fucking memes about it. The old dad and the son. What was it called? Dude, not only am I terrible at dates, I’m terrible at recalling names of things.

0:30:27
Somebody help me on the chat. You know this, you know this. What was the what was the show? Or just sympathize with me and be like, I know what you’re talking about, but I don’t remember what it’s called. Did it have three names? It might have three names. What is it? Oh, see choppers. Okay. Was that the name of the show? That’s the name of their studio, right? That was the name of their, their shop. But was that the name of the of the show? Orange County choppers. Okay. I guess the name of the show and the shop were the same. So didn’t they get insanely popular? Why did they get insanely popular?

0:31:01
They got insanely popular because their story was told. And the story of every project that they worked on was told. I’m sure there’s a lot of shops like that doing what they do, right? But their story got told. And so they got insanely big. Marketing is, at the end of the day, it’s just storytelling. And so your job is to start telling the story of the work that you do and the people that you do it with.

0:31:25
And that’s going to help tremendously. And then you put ad revenue behind that. And you put social media power, organic social media power behind that. And suddenly, you’re off to the races. Okay. All right. Yeah. American chopper was the name. Thank you. I, yeah, my brain was like, no, I don’t think it was called the name of the shop. American shopper was the, was it? Okay. So if you are in this kind of business and you aren’t

0:31:52
familiar with American chopper, go watch some episodes. I’m sure they’re on YouTube or something like that. And yeah, it’s, it’s, uh, was, it was reality TV. It was like behind the scenes. I don’t know how much of it was scripted or unscripted. And you know, they’re always getting in fights and they’re throwing shit around the shop. But at the end of the day, it was heartwarming.

0:32:11
Like every project has this great story behind it. And they actually do, you know, from what I can tell as a non-motorcycle person, good work. And that’s why it works. It’s why it works.

0:32:25
People are interested in people’s stories. They’re interested in behind the scenes. They’re interested in the process. They’re interested in the messiness. They’re interested in all those things. And so all you have to do is let that be part

0:32:36
of the story that’s told for your company, and it’s gonna work out really well for you. In most cases, in most cases. Okay, all right. Let’s go to the next segment. Let’s go to the next segment of the show.

0:32:53
I’m gonna stop screen sharing for a second. I’m gonna go pull up, let me see if I can find this video. Let’s go to my, I posted it in the inner circle. Let me go there. Let’s go there. And I just posted it this morning.

0:33:05
Okay, there’s not a lot of action on it yet. Let’s open up, do I wanna do full screen? Okay, I want to do full screen. Let’s just have a little conversation about this. And I want to maybe turn the volume down. Let’s go back to sharing screen.

0:33:28
Okay, so this is a video by Adam, the creator of Tailwind. And this is actually not a, I’m not going to really talk about Tailwind all that much in this video. I wasn’t really interested in the Tailwind side of this video. Let’s let’s play. And what he’s

0:33:48
going to do here, what you’re looking at is Figma, I’ll just kind of narrate this. He has this design in Figma that he’s going to rebuild from scratch with, you know, essentially VS code and Tailwind. And let’s make sure everybody’s on the same page here. Right, okay, okay, okay. Just looking at the chat real quick.

0:34:08
All right.

0:34:09
I’ll just, I’ll fast forward a little bit through some of this. So he’s essentially assessing the design. And then he’s getting the project set up. And I’ll just keep like skipping through a lot of this. There’s a part here where he’s determining like,

0:34:24
should this be a header? Can a header even go in a main tag? And he decides to make it a div. And I’m not, this is not a critique of like, you know, the quality of HTML or CSS or anything like that. It’s more a critique of the process that’s going through.

0:34:41
Okay? So he gets the general HTML structure out here. Now, Tailwind hasn’t been used yet at all. He’s just writing HTML. And he’s doing this, well, we won’t even go into all the details of like using Next.js

0:34:56
or whatever he’s using here for like, you know, essentially what is a static landing page. It just, I don’t know what he was attempting to show here. But now he’s starting to do the tailwind stuff. Okay, so he’s putting all the class names in. The first thing, you notice he’s spending

0:35:09
a lot of time in Figma. Like the thing that stood out to me the most, I wasn’t aware that this was still a big part of people’s process. I mean, I’ve been advocating against this for so long now. But he keeps measuring things in Figma.

0:35:25
He’s like measuring the distance between this and this, measuring this distance here, measuring the size of headings and things like this. So you can put in those classes, Px2, Pt2, that’s the padding that is right between the edge of the screen and this div right here.

0:35:43
And then, you know, he’s constantly in the video if you listen to his internal dialogue and discussion. So what did he just do there? What did he do? He just put a, this is not a Tailwind class. Because Tailwind didn’t have the class

0:35:56
that he was looking for to match the pixel value that he’s trying to match. So he put in a raw value here, like Tailwind accepts raw, what is effectively right now a magic number. This is not a number that’s tied to anything else in the Tailwind system.

0:36:09
It’s not a value that’s tied to any other element on this page. It’s just like a, I just need a magic number to solve for the pixel matching that I’m currently doing in this design. And he actually does this a lot.

0:36:20
And when you watch me look at a fig, I don’t measure anything. The idea that we’re doing pixel matching in 2024 is mind-blowing to me. That’s wild. That’s a wild thought.

0:36:36
This hasn’t been done for a long time in modern web design. Because what you come to realize is that the values don’t actually matter at all. By the way, all of the values in Sigma, because Sigma doesn’t have rims or anything else, it’s all in pixels. So he’s constantly having to do math

0:36:57
to map these things to whatever the rim values are in Tailwind. And this is like a big downside of like this workflow. All of the measuring, all of the pixel matching and mapping and math. And then there’s things that don’t exist.

0:37:12
Like even though Tailwind has like eight bazillion classes, there’s still a lot of things that didn’t have classes, like a lot of values that just didn’t exist. And then you got to go off and use like a manual one. But still, that’s not even the biggest part of the thing that was like, eye opening to me or mind blowing. As we as we just skip through this. I mean,

0:37:33
there’s a lot like, there’s a lot of I mean, look at these over here on SVG generators and such. I mean, just to kind of skip forward here, it takes them an hour and 15 minutes to build this hero section. Which in a page builder,

0:37:45
so what I actually put in the inner circle, my critique is I didn’t care at all about the tailwind side of it, or even like the measuring, yeah, it’s like something to talk about. But the biggest thing to me was this idea of the I get questioned

0:38:07
Why do you use a page builder? If you were real if you’re a real dev you wouldn’t even use a page builder. You just write the code Okay, well, this is why This is why because I don’t want to spend an hour and a half building a hero section. That’s why Go start there. And now if I was using Elementor and it produced a bunch of terrible code, you could definitely ask me that question. You could go, why would you? I mean, he’s clearly

0:38:28
doing look at go back and look at this HTML code. It’s wildly clean. It’s very clean, very clean. Okay. Bricks produces that level of cleanliness. So why would I write it, and why would I go through this process of this tailwind process, which is so granular and so, all the measuring that’s being done here, we could fly through this with Bricks and automatic CSS. So the main critique, the main point of discussion for this video was the charge that gets leveled against people like us, where they’re like, why would you use a page builder?

0:39:10
If you were doing professional work, you wouldn’t use a page builder. Well, my page builder, sir, ma’am, writes clean code. Why would I write the same code that the page builder is just writing for me when the page builder does it faster?

0:39:27
Why would I manually type all of these granular classes in when I can right-click inputs and choose values that are actually contextually appropriate and automatically responsive and fluid and all of this, clearly the workflow that I teach and that we follow, I say we, like our community in general, right?

0:39:51
It’s just hyper-efficient compared to this. I mean, you watch him like measure, measure, measure, find a class, find a class that matches, find a class that, okay, that class matches, okay, measure, measure, measure, find a class. All of that time, that’s the time we don’t want to spend.

0:40:09
That’s the time we don’t want to spend. I’ve always said, if the tools can get you from A to B faster without cutting corners, then by all means, you should use the tools. The tool is, you can only knock on the tool when it cuts corners or produces garbage.

0:40:26
Now in that case, we can’t justify the use of the tool because we’re doing poor quality work at that point. But if we can maintain the work quality or even improve on what’s going on while doing it faster, why wouldn’t you? Like so the people that ask me,

0:40:44
why do you use a page builder? My response is, why wouldn’t you? And I find it a little bit ironic and awkward that my answer to their question, why would you use a page builder, is a video of somebody else who is insanely talented

0:41:02
and knowledgeable doing it their way. That that’s all my response has to be. Here it is, just watch this video. This is why I use a page builder. Without even saying anything beyond that. Just if you can’t watch that and come to the conclusion yourself, I don’t know if you know what you’re watching, right? I think anybody, anybody

0:41:26
who watches this, if you know what a Bricks ACSS workflow looks like, which I’ve shown in hundreds of hours on this channel, then you simply can just watch this and understand. You’ll just have an inherent understanding of why one way is wildly more efficient than the other way. And it’s not a knock on tailwind, it’s not a knock on coding,

0:41:50
it’s just an answer to the question. Kevin, why would you use a page builder? If you’re so great, why? Because this guy’s fucking great and this is what it looks like. That’s why. That’s the only answer I feel is needed. Right? In fact, it’s in this position I can give Adam every

0:42:12
fucking flower that Adam deserves because here’s the video. Here’s the juxtaposition. Imagine being as good as Adam. Imagine being as good as Adam is and it still takes this to achieve this hero, right? That’s the argument that’s that I think that’s the only one that I need like this this kind of tells you like you you could get to the level Adam is at and This is still going to be the what your workflow looks like And so it’s just to me. It’s an inherent answer to the to the question. I would

0:42:52
encourage you to watch it, right? I would encourage you to go watch it. It’s just building a landing page with TailwindCSS. It’s on his channel, Adam Wathan. Yeah, go just go watch the video. It’s highly, highly insightful. What I would

0:43:07
say is, I mean, I challenge wholeheartedly. Let’s talk about the magic number stuff and the pixel matching. Because I think this is a, beginners don’t understand why, okay? And then I think a lot of people who’ve been doing dev

0:43:23
a certain way for a long time, they have a hard time breaking free from this. Where the heck is the whole landing page? Okay, why is this design good or decent or whatever? I think you could objectively say. Like, obviously design is subjective, right?

0:43:37
But if you polled 100 people and you were like, is this a good design or a bad design? They would be like, I mean, it’s a pretty good design, okay? Are we all in agreement there? Like, it’s a pretty, it’s not like, oh my God, give it an award. Like, okay, but it’s clean.

0:43:52
It follows like logical design principles. What are those logical design principles? We start asking. Well, consistent hierarchy and typography, consistent spacing, for the most part. Like if we measured the space between this header

0:44:10
and this text, and the buttons and the bottom of this, I would expect that they would either be perfectly equal or very, very, very close. Now, if they’re not perfectly equal, I would ask why. Let’s say they’re eight pixels off. What about those eight pixels makes that good or bad in this design?

0:44:26
Is there a, well Kevin, I mean, without that eight pixel difference, that’s trash, right? No, I mean that’s not going to be the conclusion. In automatic CSS, the sections have automatic block spacing, which is equal. It’s equal spacing, so the amount up here would exactly match the amount down here. Now, here’s the next question about that.

0:44:54
So we’ve already determined, right? If it’s equal, that’s actually, that’s probably good. That’s probably the best case scenario. If it’s off, I would say, why is it off? Is it off because you’ve got a guy that’s using, now clearly in this case, he’s writing code,

0:45:06
but in a page builder, people grab those little padding handles and they just drag them. And then you would actually have two values that are uneven. Are they uneven because there was purpose to the unevenness or are they uneven because the dude’s choosing random values

0:45:18
with a fucking drag slider and he doesn’t know what he’s doing? Probably the latter, right? Because there’s no explanation for why they would need to be different, okay? So you follow me on that.

0:45:28
Now let’s ask, what is the amount? Just look at it. Just look at it. What do you think the value is for that spacing right there is it a hundred and twenty pixels is it a hundred pixels is it 80 pixels

0:45:44
the answer is it doesn’t fucking matter at all one iota it doesn’t matter it does not matter the design is good the way that it is because of the difference between that padding and the content around it

0:46:00
and how this section may be different from the sections below it. For example, there’s a hero section. It may have more block padding than other sections to denote that it is more important, that it is the hero, that it is the opening of the page.

0:46:16
It doesn’t matter that it’s 120. It matters that it’s 120 when the others are 80. That’s a difference that matters. You could use 100 and then 60 in the others. You could use any numbers will work as long as the relationship essentially stays the same.

0:46:35
Now you can’t get too tight, you can’t get too loose, but then you could, I mean you could win an award because you’re fucking different and you’re breaking norms, like yeah, that happens all the time too, which gives even more credence to the idea that the numbers don’t actually matter.

0:46:52
The numbers don’t actually matter. The idea that you would measure anything when looking at this is mind blowing to me. That what we have are different fluidly responsive spacing values that we can use. We have a normal section, we have a large section,

0:47:09
we have an extra large section. I make the hero large or extra large or whatever all the other ones are normal. Now the relationship is correct. As long as the spacing, it remains balanced, right? Everything is, everybody’s happy.

0:47:23
Could you take that block of content, higher, smarter, the lead, the buttons, and move them to the bottom of the hero section to where the bottom now has only 40 pixels of padding and the top has 200? Yes, yes, you could do that too. You could do that too and it doesn’t

0:47:41
matter that it’s 240. What matters is the relationship between the top and the bottom. So that’s where you can go with small or extra small or t-shirt sizes create the same hierarchy, the same relationship of values. The values themselves don’t matter. The values have no value. Their relationship to each other is where the value is. And understand the relationship between the values

0:48:08
allows you to create the exact same look and feel without caring what actual values were used in the Figma file. And this is, now, pair what we just talked about with the understanding that there is no such thing as pixel matching on the internet. This is because of device sizes, device resolutions,

0:48:31
device orientations, rendering capabilities of browsers. There is no such thing as pixel matching. This is not even a technically possible thing to achieve. There are tremendous amounts of well-detailed articles on exactly why this is. So the idea that you should even be attempting

0:48:53
to match pixel for pixel, it has no value. Time to value is fucking as negative as it can possibly get. This is just not something that should even be in anybody’s consideration. You could create a hero, a web design that looks exactly like this, and not measure a single thing. Just make sure all the relationships are the same. Use all t-shirt sizing, okay?

0:49:18
And then hide the Figma file. Just hide it. Don’t let anybody see it. And then let them judge the design of the site that you just built. And they will go, that’s great.

0:49:29
It’s fantastic. I mean, everything’s well-proportioned, everything’s balanced, everything. I mean, this looks great. And then you could be like, but ha, this thing I’ve been hiding from you,

0:49:39
this Figma file, they’re different. Look at them. He didn’t make the thing I gave him. Not a single person knows that unless you give them, hand them the thing, and then measure it for them. Because most of the time you can’t even eyeball it anyway. Nobody can eyeball 12 pixels versus 8 pixels, okay? Both iterations are going to look great. Both iterations are gonna, it doesn’t matter.

0:50:05
The values don’t matter. It’s not something you should worry about. What you should worry about is the scalability of the site, the maintainability of the site, the fluid responsive nature of the website, the efficiency and how you build.

0:50:16
The same way where I can go, you know what, I can get to the finish line faster, and actually it’s gonna be better. It’s actually, it’s gonna be better because it’s much more scalable. The idea that using magic numbers to pixel match is somehow better than tokenized styling,

0:50:35
that’s insane. That’s insane. The last thing you want is random raw magic numbers floating all over a website build. That’s the last thing you should want. In fact, you should reject that wholeheartedly. The idea is, the general principle is, I should never use a magic number. Ever.

0:50:54
If I have to use, something’s wrong if I have to use a magic number. So I should take all steps to not use a magic number for something. General principle, general rule of thumb. Ok, then this also assumes that like, you know, this designer didn’t make any mistakes in what they were doing, that this designer is actually great. But again, there has to be a reasoning behind something.

0:51:17
So if a designer’s gonna be like, you didn’t make, you didn’t, that’s what people are always worried about, the wrath of the designer. You didn’t match it pixel for pixel. They just wanna take you out behind the barn and shoot you

0:51:27
because you were a few pixels off on that section pad and you used 80 and I used 90 and you used 80. And they’re like, you know, red in the face, they’re like, man, they’re so upset with you. And people are like, I don’t want that wrath. I don’t want the designer wrath.

0:51:42
Well, have the designer explain it to you. What? I’m sorry, sir. What? Why does it have to be 90 instead of 80? Again, and if they don’t have any reason,

0:51:50
like, well, that’s just what I like. This is what looked great at the time. But it could be 80 and it looks just fine. As long as what I can’t do is they gave me something to 120 and I went with 60. Like, I just cut that shit in half.

0:52:05
Like, okay, now they’re upset, they got a right to be upset. Okay, but if you’re proportion, they have a right to be upset if you use 80 and then down here you use 77. Because they’re like, what are you doing, dog? Like, that’s three pixels off, that’s not consistent.

0:52:19
Like, that’s a violation, right? But the idea that, you know, they have any reason to be upset because you didn’t measure everything they did in their figma file you created the semblance of their design right you you mimicked what was going on here and and you stuck to the same principles that they use and by the way that same fucking designer a month

0:52:43
later might revisit that file and be like you know I kind of want to tighten it up a little bit but you’re fucking evil because you did it the first time. Again, if there’s no valid reason for why, then it doesn’t matter, does it? It doesn’t matter. So that was the biggest takeaway for this. I did not expect when I watched this video, I didn’t expect it to take as long as it did. Number one. Number two, I didn’t expect

0:53:10
to see a bunch of raw like, you know, there’s raw values that wasn’t the only place this is raw values being stuck in the tailwind here. And then three, I did not expect to see all the measuring that I was seeing. I mean, he measures to death, like, everything gets measured. We don’t have time to watch the whole video. Okay,

0:53:26
everything gets measured multiple times, multiple times everything. And I was just like, what is happening? Now to, you know, in terms of code versus a page load or something like that, what I will say is, if he had a system for not worrying about the measuring, it would have gone a lot faster, wouldn’t it?

0:53:47
Now we’d be in a much different situation and scenario, but I can only critique what actually happened in real life, which is what we’re watching here. Get rid of the measuring, get rid of caring about pixels, pixels do not matter. By the way, I mean, we don’t even code in pixels, right?

0:54:01
We code in rims. Adam Lowe, I got into this big debate with Adam Lowe a while back, where essentially it was, which we should have this debate again publicly at some point, because it’s just fun. It’s fun to have these kinds of debates. But his position is you just build in rims and pixels don’t matter.

0:54:27
Okay, that was the argument.

0:54:29
Like, you know, if you’re only stuck on pixels because they exist, right? If it was just rims, if you just started from an understanding of rims, then it would all be fine. But the problem I have, the main problem I have with that is that you can’t make understanding of a relative system

0:54:46
system without a static point of reference, right? Okay, so, and I have this problem when I call pizza shops, this problem all the fucking time. I say, how many people does the large feed? Because people is a static referenceable thing, like three adult human beings, right?

0:55:06
Okay, so average three adults, how many of them can be fed with this large pizza? And their response is amazing. Their response is it makes no sense whatsoever. But it’s it’s always the same. And it’s always amazing. And I always love getting it. They’ll say there’s eight slices. Fuck does that mean? What that is? I mean, I appreciate the fact that

0:55:36
you answered the question. But I mean, we know a slice can be like a fucking New York giant slice, right? Or it could be like a little kitty slice, you know? I need to know, like a slice of pizza is a relative value. Like that’s, it depends on how you slice it, literally. It’s relative to the person slicing.

0:55:56
So I appreciate that it’s an answer, but it gives me no information as to what I’m asking, right? Like a big New York slice, that feeds one whole adult human being. But a normal pizza slice, I mean, that probably doesn’t. A normal adult, normal pizza slice, I probably need three slices, four slices, something like that. If I’m a little hungry, telling me the number of slices doesn’t give me any, any. So when somebody says, well, it’s just one rim. Well, my friend, a rim is, it’s literally called a relative unit.

0:56:27
What is it relative to? I need some understanding of what one rim is going to produce. And that’s where we go back to pixels because it’s relative to the concept of pixels. That’s a debate. We should have that debate. It’s a fun thing. Does it matter in the grand scheme of things? No. No. Is it going to change the world? No. But it’s fun. It’s fun to have these debates

0:56:51
and these these conversations. Okay. Yes, it also depends on who you eat pizza with. That is correct. But saying you know, how many people that’s it’s definitely like how many slices is a far less relevant. I actually think that there is no perfect way to ask to understand how big a pizza is, unless they tell you in what?

0:57:17
Inches, right? If they say, oh, it’s an 18 inch pizza or whatever. Now, now I have some, and guess what they just told me? Well, essentially, they just gave me a pixel value for the pizza, which case closed. I rest my case.

0:57:31
All right. Let’s go into Q&A, Q&A, Q&A, Q&A, Q&A. Anyway, I would encourage you to go watch that for sure. Okay, I’m going to try to remember that I’m not, I identify as two people. Okay, I’m trying to, let me get some water. We got to make sure the voice doesn’t go out here.

0:57:53
By the way, the viewership is fantastic. What are we at with likes on the stream? Toss some likes up on the stream. All right, we’re going into Q and A. Q, let’s do hashtag Q. Google search here.

0:58:12
Oh, good, lots of questions. Let’s start at the top. Frames header delta. I wanna swap the nav with a nestable nav. I want to have a border around the middle nav item separate from the button,

0:58:26
but I can’t figure out the HTML structure and CSS. Okay, let’s come back to that in just a minute. Whose podcast, we’ll do, we’ll just, we gotta get some low-hanging fruit out of the way. That is not a low-hanging fruit question. Whose podcast were you on this morning?

0:58:41
Ben from LayerWP. It was a fantastic discussion. When it comes out, I would highly recommend you listen to it. It’s got a lot of, well, just a lot of tell it like it is, you know, in it. And Ben was, you know, he was loving it.

0:58:55
He was loving it, so it’s a good episode. What top one to three things are you hoping to gain from WordCamp Europe? Number one thing is to just meet my team in person and hang out. I’ve met Andrea.

0:59:10
He’s the only person from my team that I’ve met in IRL, IRL. But yeah, I just, you know, my team’s gonna be there, I wanna meet them. We have a lot of planning to do. We have a lot of secret, secret planning to do.

0:59:26
Some exciting things, exciting things in the works. That’s number one. Number two is to see Italy. This is actually, fun fact, fun fact, the first time I’ve legitimately left the United States. I did go on a cruise once where we went to St. Martin,

0:59:48
which is technically another country. But because it was a cruise, you know, I was there for like what, six hours, didn’t need a passport, you know. This is the first time I’m actually legit, you know, hopping over the pond and seeing the world.

1:00:05
Seeing the world. And so this is, I’m really excited about that. Number three is I’m excited for the networking and the parties and the events that surround WordPress, WordCamp, WordCamp. I went to my first WordCamp last year, WordCamp US,

1:00:22
and it was just the parties, the events, the networking, the meeting people, people that I see online, you know, other YouTube, other YouTubers, content creators, things like that. That’s always fun. Yeah, it’s people. It’s about people. It’s about relationships. It’s about experiences. Notice what I didn’t say. I didn’t say the

1:00:45
talks. I’m really excited about the talks. There’s a it is, it’s unfortunate.

1:00:53
It’s very unfortunate.

1:00:53
And they’re gonna have to fix this. You know, the parties, the events, the people, is enough to get people there, to the conference. But wouldn’t it be just way better if there were actual good talks to go along with it, like it was actually substantive material

1:01:09
that you could learn, that you could use for inspiration. I mean, I’ve been to other conferences, like when I was heavy into photography, I went to many photography conferences. Oh my gosh, the amount of stuff you can learn at a photography, like technical stuff,

1:01:28
with like, I was into off-camera flash and different lighting techniques and things, and there would just be all these mini workshops and you would learn all the technical side of lighting and this and that, and then how to interact with models and how

1:01:40
to pose models and did it because you know posing is actually probably one of the most important part like that’s wouldn’t be considered part of photography but if you want good photos and you have to know how to pose people so that’s a huge thing I mean you can learn that kind of stuff at conferences fantastic I go to a word camp don’t learn a damn thing.

1:02:01
Don’t, and really, even if I was like, more on the beginner level side of things, I really don’t think there’s, it’s not all that much value. And why is it not all that much value? It’s very surface level stuff.

1:02:14
I was very shocked that they don’t put hardly any focus on business. Like, why are they not helping agency owners? Why are they not helping freelancers be more successful in using the tool that they advocate for and the environment that they want to, you know,

1:02:30
continue to dominate the landscape. It’s dominant because agencies use it. It’s dominant because there’s millions of freelancers use it. I mean, this is, but you’re not gonna give them any love in the talks. And then you start to ask why.

1:02:46
And you start to ask yourself, the first thing I asked myself was, why are these so surface level? And then you start to realize, well, surely, I mean, we know the size of the WordPress ecosystem. Surely these weren’t the best of the best topic ideas,

1:03:05
right, surely. So what happened to the best of the best ideas? Where did those go? Was there any transparency as to why certain talks get declined and certain talks get accepted? Is there something, some sort of favoritism? Is there some sort of political thing going on?

1:03:28
And then you realize there’s a lot of DEI stuff going on, okay, which, you know, not a big fan of. It’s not, that’s not, it should be on the quality of the talk, right? It’s just who has the highest quality talks, who has the highest quality content? Let’s put the focus there.

1:03:48
I don’t care who that happens to be at the end of the day, but I do think that that’s the substance we should be grading. And so it’s just like, but this is what you get. This is when the focus is not put on substance, you get a conference where literally nearly every person I talk

1:04:06
to, nearly every person I talk to is like, yeah, I’m not really excited about any of the talks. I’m really going for the networking and the people and the events and the things like

1:04:12
it.

1:04:13
Okay, that’s a problem. It’s a problem that that’s the reputation that WordCamp has, that the talks are not that great, and that you should go for the people and the, you know, outside experience and all of that, because all they have to do is make the talks fantastic and then it’s like a no-brainer to go to WordCamp. Because a lot of people are like,

1:04:31
I don’t want to spend the money because I could see these people elsewhere or I could travel on my own time or whatever. The talks have to have substance. At some point, they need to get substance back into the talks and they need to get rid of whatever’s stopping the talks

1:04:48
from currently being substantive. It’s just, it wasn’t, the talks were not a thing at WordCamp US. Now maybe EU is different, and we’re about to find out. Maybe EU is different, I don’t know. But notice, it wasn’t in my top three, was it?

1:05:04
It wasn’t in my top three. Okay, that was a long one. Let me hop over to, I gotta see what Chad says about this before we move on to other questions just in case. Okay.

1:05:15
I left ClickFunnels behind after a conference

1:05:17
where they announced the split of people training instead of the content of the training. I was done with them. Okay. Oh my God, you’re saying the exact same things I do

1:05:25
about the WP Topics.

1:05:26
I totally agree with everything you’re saying. Okay. All right. You can listen to the speakers or explore the racing track on the roof of the exhibition center. Yeah, yeah.

1:05:43
That might be exciting.

1:05:45
Okay.

1:05:46
Good, good, good, good, good.

1:05:49
I’ll just put that up.

1:05:52
That’s funny.

1:05:53
Marcus says, we met at recurring revenue retreat in Orlando last year, but look forward to seeing you again in Italy. Absolutely, Marcus. Super excited to see you again. We need to do some stuff. We need to get some content created together.

1:06:07
We got to do something. We got to make some moves.

1:06:10
Okay.

1:06:10
Bring your raincoat to Europe. Man, see, I didn’t want to hear that. I was really hoping the weather would be good. I know that they’ve been in like some sort of downpour situation for a while now. I was hoping it was gonna clear up.

1:06:25
Okay, all right, let’s go back to questions. Let me go back to the search, all right. What’s the story behind you going from an agency owner to releasing ACSS and frames for web designers? I built, I’ve told it before, so I’ll just do the quick recap.

1:06:40
I built Automatic CSS for our agency, for us to make our workflow more efficient. But at the same time, I was already doing YouTube videos, I already had the inner circle, and I was like, you know what, this is taking a lot of work.

1:06:54
This is a lot of work and a lot of time. And it was to the point where I was like, I know this is gonna be super beneficial, so there’s no reason to keep it just for me. And so I actually started releasing it in the inner circle, and building it with the inner circle alongside them.

1:07:18
And then it just started to slowly become what it’s now become. But it wasn’t like, you know, a lot of products are like, I see a hole in the market, I’m gonna make a product, and I’m gonna sell it. Like, it was really like,

1:07:31
how do we make this workflow, caring about classes, using the latest CSS to make our workflow more efficient, make our projects more scalable, more maintainable. We’ve got to put a framework together of some sort. I tried out Oxyninja, I was using that for a while. It was like the only thing.

1:07:47
So it was like, got the job done for a little bit there, but then just the lack of customization, the lack of flexibility, the lack of it being up to the latest in CSS standards, there was none of the concepts that are in automatic CSS, fluid responsive typography, fluid responsive spacing,

1:08:04
automatic grids, on and on and on and on and on and on. I mean, the list goes on for miles, right? None of that stuff was there. And the only way that I figured it would get there is if I did it. And so I just started doing it

1:08:16
and then it just became what it became. Let’s see, what are your current top one to three recommendations to learn copywriting? I don’t know. I don’t know. I don’t know. Because I didn’t there’s no one resource I can point to. It’s just been I’ve read tons and tons of books. I’ve watched tons and tons of videos. I’ve analyzed tons and tons of copy.

1:08:43
I’ve done workshops I’ve done like there’s no it’s like a culmination of it’s truly a discipline of study. It’s like, what are the one to three videos I should watch on jujitsu? Like there’s not, there isn’t that thing. There isn’t that thing. You can’t even watch one jujitsu person

1:09:02
or three jujitsu people. But there’s different styles, there’s different philosophies within jujitsu. There’s completely different methodologies and approaches. It is a discipline that you have to just commit to studying. That’s it.

1:09:18
That’s all I can say. It’s like what are the top three places I can learn physics? What are the top three places I can learn surgery? It’s like you can’t. It’s a discipline you have to commit to and you have to study from various places and sources and over time and you got to practice and then you’re going to start to get good at it. And I’m not even that

1:09:41
really good at it, because I can’t be because I can’t. I’m in a I’m in a jack of all trades scenario, right? If I if I dedicated myself to copywriting, I’d be way better at copywriting than I am. But I can’t, because then I can’t do the other things that I do. So but what I can do is I am pretty good at analyzing copy, like I can I can look at copy and understand, you know,

1:10:04
what’s great about it or not great about it. I understand the principles and the philosophies behind it.

1:10:09
Yada, yada, yada.

1:10:10
Okay, let’s see.

1:10:11
I had a nightmare the other day where I asked you a question and you gave me a rude answer. Does this mean I need to touch grass? I don’t know. I don’t know what that means. I don’t know what that means.

1:10:21
Yeah, I don’t know. I don’t know.

1:10:24
Maybe it means you just need to take a little bit of a break, Matty. You’ve got too many live streams,

1:10:30
too many bridge building, too much bridge building. I don’t know. Yeah, take a few days off. Come to Italy. Let’s have a few glasses of wine. Let’s have a nice little pizza.

1:10:43
Let’s have some nice conversation, you’ll be back on track. All right, is it a good idea of having a very large logo in the footer? Sure, it’s not like it depends on the scenario, it depends on what the logo looks like. Bev’s logo, no.

1:11:03
Bev’s logo, you want that to be as small as possible. A great logo, I mean, yeah, you could make it big in the footer. I’ve seen it happen. Does it take up a lot of space? And is it like, does it provide any value to the visitor?

1:11:19
No, not really. But it could be a design decision that somebody makes and you could argue against it or you could argue for it. Or it’s a very, that’s a very subjective thing. Okay, is StoryBrand a good place

1:11:30
to start to learn storytelling?

1:11:31
I think StoryBrand is a very solid framework, very solid framework. I think it’s a good place to start, absolutely. It’s a good place to start. I wouldn’t finish there, but it’s a good place to start.

1:11:47
Can we have a video that demonstrates

1:11:48
how to create accessible cards from scratch, if there isn’t one already? There is one already. Just look up, in fact, there’s a 2.0 version, there’s like multiple versions on my channel. Speaking of pixels, should newbies start their sites

1:12:05
at 62.5% root font size or 100%? Well, the industry standard is 100%. If you don’t wanna do math, then 62.5%. If you are in total control of your environment and you’re confident you’re not gonna use any third-party tools that use REMS,

1:12:23
then there’s nothing wrong with 62.5. If you want to be extremely safe and have no chance of any collisions with other other tools using REMS then use 100%. In automatic CSS you now have convert to REM automatically in inputs which means there’s no math needing to be done which means you can use a hundred percent now without the downside of a hundred percent. So I would use, I now use 100%,

1:12:51
if that’s what you’re asking. Where I used to use 62.5, because I didn’t have the automatic conversion tool. But now I have the automatic conversion tool, so there’s now no longer a reason to go to 62.5.

1:13:02
Okay.

1:13:03
What are the most common breakpoints

1:13:04
you use the most or recommend?

1:13:06
The ones that are the defaults in automatic CSS are the ones that I use by default, which is why they’re the default. But I will say that we are approaching rapidly the era where breakpoints will no longer matter. I tend to feel that container queries for the most part

1:13:27
are going to put breakpoints in the grave, and they’re just gonna continue to be less and less and less and less and less relevant. Obviously we have things like fluid responsive typography eliminated the need for breakpoints with typography. Fluid responsive spacing eliminated the need

1:13:44
for breakpoints and spacing. Automatic grids kind of eliminates the, which we call variable grids and automatic CSS eliminates the need for breakpoints with grid layouts. And this is just gonna continue on and on and on. We’re just parts of web design where we needed break points

1:14:02
are just no longer going to need break points. And then when container queries are a big thing, because what a container query essentially does, if you’re not up to speed on container queries, is a container query allows an element or a group of typically a group of elements,

1:14:15
like a card, for example, to look at its parent size. And its parent size is what actually determines how that card is styled or behaves. We no longer need to care about, like the device used to force things to a specific size and we had to look at the size of the device.

1:14:31
Now, you just look at the size of the parent container and you can make decisions based on that, which is actually way better than a breakpoint because it means that if I take something on desktop and move it into a smaller container, it will still conform to that container properly

1:14:47
without care for the breakpoint. Like we’re still on desktop. Like the breakpoint actually is irrelevant. Breakpoints are only relevant because of what they do to other elements on the page. They essentially are like a trash compactor, right?

1:15:00
They start to bring in crushing things and then you have to make decisions based on, well, I don’t want that thing to be crushed, so here’s how I’m going to adjust it, right? Well, if elements or groups can look at their parent container size and just be like,

1:15:14
what size are you? Okay, that’s how I’m going to behave based on your size. The breakpoint actually doesn’t matter anymore. Because you can have that situation happening on a desktop, just like it might happen on a mobile device. So container queries are much more powerful.

1:15:27
Yet another debate I’ve had with,

1:15:28
yeah, Maxime, right?

1:15:30
We had a huge debate.

1:15:31
I had a huge debate with Maxime. Maxime is not all that impressed with container queries. I happen to think container queries are going to replace breakpoints for the most part and are far more important and valuable and powerful than breakpoints.

1:15:47
And so we had a debate about that. But see these debates get lost in like, you know, Facebook land. It’s like, nobody’s ever going to see that ever again. They should, we should make these into videos. I’m very much with Mark Zemanski on this.

1:15:59
We should do these, we should have these public debates. It’s very fun. It’s very fun. It’s just, it’s intellectually stimulating, right? Okay.

1:16:07
Let’s see.

1:16:08
And by the way, I also think it helps people understand like what’s going on in this industry and the technical nature of these things. Why do breakpoints exist? What is a container query? Why would they even come out with?

1:16:20
See, first of all, it’s on my side, just the fact that they came out with container queries, because somebody was like, these breakpoint things ain’t really doing enough for us. We got to have this concept of a container query.

1:16:33
So they did all this work to engineer container queries. Why? Because they’re less powerful than breakpoints? Like they’re, no, it’s because they’re more powerful than breakpoints. And I think that fact will be borne out

1:16:47
in web design very soon. Okay querying images in a query loop in Bricks using Happy Files Pro is this possible? Querying images in a query loop on Bricks using Happy Files Pro? Yeah absolutely yeah absolutely. 100% let me let me see if I can let me go let me go screen share let’s go into Insta WP because I just did this oh yeah I just did it in a frame. In a frame. Okay, where’s where’s frames? Let’s go into here. Just did. Oh, I’m going to

1:17:20
do a whole video on this frame. This frame is fantastic. This frame. This frame took some intellectual stimulation. It looks very simple. It looks very simple. When you see it. Let me go to No, I don’t want to go to getting started. I want to go to templates. CTA. It was a CTA section, I think let me search for it CTA section What was it called Mike maybe Mike or something

1:17:43
God the search in WordPress is just awful What in the world does hero alpha have to do with my search of CTA section, dude? That’s what I this is the thing they could be working on I mean, they this is what they could be improving but when still we get we get we get Lego blocks.

1:18:04
Okay.

1:18:04
Um, CTA section.

1:18:06
I mean, I can’t even find what I’m looking for.

1:18:08
The search is so bad. Indigo. Here we go. Indigo.

1:18:10
All right.

1:18:10
Let’s view it first. Let’s view it first.

1:18:13
Look at this.

1:18:13
Doesn’t that look so I, I, when I saw the concept for it, I was like, oh, let me just whip this up real quick. Let me just whip this up real quick. No, my friends, this is not a whip it up a bowl layout right here. But let’s go in and I’ll just show you.

1:18:33
Let’s see if we can, see if this part is easy. Now, Bricks, see it’s gonna look different in the builder because Bricks, and I just, what is his name? Charoff, Charoff, is that his name? The guy that works with Bricks now? I just pinged him on Twitter and I was like, my guy, my guy,

1:18:50
I know you weren’t here when this went down, okay? But for two years now, for two years now, we’ve had a ticket open, that Bricks does not render styles from data attributes, which means it can’t render the JavaScript that’s in this block,

1:19:03
and it can’t render any CSS that’s attached to the data attributes. And that’s a really bad thing. It’s actually quite embarrassing. So I messaged him on Twitter and I was like, can you look into this for me?

1:19:15
And he was like, I got you, I got you. But he did message me back and he said, it’s not that easy, okay? We’re gonna work on it in 2.0, but it’s not a quick win. Okay, which I’m fine with, it’s not a quick win. That’s why it hasn’t been done.

1:19:27
But I mean, it’s two years, two years, it’s a long time. For a fairly egregious issue here. But anyway, to answer your question, let’s go ahead and, oh, look at that. There’s a loop, that’s actually just one image. Okay, let’s go check out this loop.

1:19:43
And I think what we can do, so post type is media, and we are going to pull from the headshots folder. So right here, when you say type is post, post type is media, and you go down to the categories, Happy Files actually loads its folders in the categories area.

1:20:05
So I have a folder called headshots, and look, it says right there, folder. So I go pull this from the folder, and then what I do is I simply go over here and I go dynamic data, and I go, is it post ID? I think post ID is the one that we want.

1:20:21
Bam, look at that. Now I go to the front end, and in fact this section in the instructions says you should absolutely use a query loop for this. And just to kind of give you a little rundown on why this is so difficult.

1:20:37
It’s not difficult if you were only building for one screen size. Because the reason this layout works is because it’s symmetrical. If you’re missing an image in the last row, it doesn’t look good at all.

1:20:50
It’s like, why is that missing an image? It only looks good because it’s a perfect amount of images. Okay? So let’s talk about the technical nature of this. I just had PTSD thinking that I wasn’t screen sharing. I just look back and now I can relax.

1:21:04
It actually is screen sharing. Okay. We’ve done that before many times as people know. Okay. So as the device crushes the layout, okay. Now, as you do this just like randomly,

1:21:15
you will see points where it breaks, but that’s because the JavaScript cannot, in real time, recalculate what’s going on. But if you just reloaded the page, any page load at any break point is going to be perfect because of the JavaScript, right?

1:21:31
But as we go through, you’ll start to see, what this will give you an indication of is how this is done. So, and I’ll, look, I’ll just give you an example. So see how this is cutting through the images? That’s another obvious thing that breaks this layout

1:21:47
where you’d go, that doesn’t look all that good. All right, let me refresh at that break point. See, that’s perfect. Ha ha, see how it’s perfect. When the person loads the page, it doesn’t matter what the device size is,

1:21:57
when they load the page, it will look perfect, okay? And then what it’s going to do is it’s going to stack itself and notice, oh, it’s broken. Well, it’s only broken when you dynamically change, but I’m going to refresh the page. Oh, it’s perfect again. Look at that.

1:22:10
It’s absolutely perfect on every page load at every device size. And that is the challenge with this layout. That the number of images in the grid is actually an unknowable quantity. So you can’t do anything with CSS based on knowing the number of images, right? Because you’re not going to know the number of images. Even if you put in the exact number of images that was needed to make it look good right here,

1:22:36
okay?

1:22:36
What the hell just happened? Refresh the page, Bricks. Okay, it like half refreshed. Even if you could just say one, two, three, four, five, six, seven, one, two, three, 21 images, pop them in, right? Oh no, that’s 28.

1:22:50
I’m awesome at math. I did go to public school, if you’re curious. Okay, so anyway, let’s say you put the 28 in, right? Put in the 28, well guess what? The minute, the minute a device size is different than this, you need more or less images,

1:23:06
and now you’ve lost an image and it doesn’t look good. Or you’ve created another row on accident and you don’t know the actual height of these images how they’re rendered so it cuts into the see the only way to make this section actually perfectly symmetrical on every device size is to use a bunch of crazy shit crazy techniques okay one involving javascript um so essentially you need to know the rendered height of the images you need to know the amount

1:23:34
of rows that you want in the layout and because we’re restricting the number of rows in the layout, we can only restrict that by the height of the container. And so in order to make sure nothing gets cut, which means then that we have to hide overflow, because in order to make sure there’s never too few images, you have to load in more images than you actually need.

1:23:55
Then you have to cut off the overflow, and then to make sure everything is positioned right and correct, you have to know the height, you have to know the rendered size of the gaps, and then you have to base the amount of rows or the max height of the container

1:24:08
off of that information.

1:24:09
See?

1:24:10
What looks so simple, and this is why, by the way, I just, this goes back to the podcast interview I just did with Ben. There was something I wanted to make a point about that I actually forgot

1:24:20
because we kind of got off on some tangent, but it was about pricing website projects. And I was gonna make the point that pricing per page is a wild concept. Like you would be like, well, it’s a 10 page website, so here’s the cost for that.

1:24:35
Well, what if this section is on one of those pages? Because looking at this section, you might be like, okay, that’s fine. But you get eight minutes into this section trying to create this layout and you go, oh, fuck. That’s literally what went through my head, right?

1:24:51
I was like, fuck. I thought I thought I was I had a little free time. I thought I was just going to whip this one up, release it as a frame and then you’re like, fuck, that’s this is a situation. I got myself in a little bit of a situation here and then I got to start.

1:25:04
I had to go deep. I was fucking my whole elbow deep in the bag deep in the bag. Okay, trying to solve the problems that kept arising from this relatively simple little, cute little layout. But this also then speaks to the value of frames. It’s like somebody else is doing that work for you,

1:25:24
figuring it all out, and then all you have to do is pop it in, loop it up, and move on with your life. That’s a fantastic benefit to all this. But yeah, I’m gonna do a whole tutorial on this in the inner circle, step by step, exactly how it was done. Let’s see. Yeah, now making that work and scale the way it does sounds

1:25:45
tricky. Yeah. Okay, good. All right. Yeah, chat looks good. Viewership still good. All right. Fantastic. All right. So I don’t Yeah, we’re gonna do a whole video on this. So whole tutorial walkthrough, it’s gonna be super valuable. It’s gonna be part of my JavaScript series because my JavaScript series is about teaching you JavaScript to where it’s like

1:26:11
you’re solving real world problems. And this was legitimately a scenario where it’s like, ah, I think I’ll just use JavaScript for this for the hell of it. I could not find, I tried every CSS trick in the book, right, and I was like, I can’t figure it out.

1:26:26
I’m just, I gotta go to JavaScript for it. Because I know JavaScript can do it. I know JavaScript can do it. And then when I got into the JavaScript, in my mind I was like, I’m just gonna calculate a little height,

1:26:36
calculate a little gap, all right, we’ll be good to go. No, no, no, no, no, no. Got in a little bit of a situation on the JavaScript side of things too. This is one of those scenarios where it’s like, you just want, you know,

1:26:48
you wanna waterboard the designer, right? Because you’re like, I know what you did. I mean, this is, it does look good, but as a developer, I mean, it deserves a little bit of waterboarding. You know what I’m saying? Like, it’s not a fun thing.

1:27:02
It wasn’t a fun thing. Let me back up. It wasn’t, because I’m passionate about the work that I do. It was a fun thing and it was intellectually stimulating. But if I was getting paid money for that, I’d want to waterboard the designer.

1:27:13
Because I’d be like, dude, this is they don’t need all this. Come on, give me something simple. Give me something simple. Time is money clocks ticking. That’s the kind of situation that this is right here. Kobe says there’s a JS series. Yeah, my friend in inner circle, or it’s called learn JS with Kevin. And it’s

1:27:31
and it’s like, you know, it’s in my typical style, because I’m learning JavaScript, right. And so I’m just sharing what I’m learning. I’m not a JavaScript expert by any means, but I think it’s super valuable to learn alongside somebody else who’s figuring it the fuck out, right?

1:27:48
And it’s great. It’s a good, so it’s not like the other series that I’ve done where it’s like, you know, I’ve got 20 years experience doing this, you know, here’s how I would recommend doing it. It’s more like, here’s what I figured out

1:27:59
on this one right here. And I think it’s really not just valuable but interesting right to see that happen and again it’s not and the reason I’m doing it is because I hate JavaScript every JavaScript course I’ve taken I hate it I absolutely hate it it’s like let’s print hello world let’s print this let’s do that and it’s nothing as practical nothing is like I want to start from a real-world problem

1:28:24
like this and go here’s the power of JavaScript to solve this real world problem and just teach the concepts as we solve the problems. That’s exactly how that series is going. Okay, and I’m a little bit behind on inner circle videos if you’re wondering is why. Two weeks of travel and then this. I couldn’t even, I could barely talk yesterday. My throat was it hurts so bad. Yes

1:28:53
I was like, I don’t know if I can live stream tomorrow. I don’t thankfully overnight It got tremendously better, but I’ve been sick for the last six seven days Every day is something new. So it’s just some fun new symptom It’s like oh that went away, but then we have this fun thing to do So yeah, it’s just I haven’t been able to record physically like incapable of recording. I’ve been doing a lot of planning, I’ve been doing a lot of that kind of stuff.

1:29:19
And literally, you can ask my wife, when we got back from the two weeks in Florida, I was like, I’ve got to record like seven videos this week. Okay, so leave me alone, I gotta record like seven videos. Next day, couldn’t talk. Next day was sick and have been six cents.

1:29:35
And so that plan went to absolute shit. Okay. Let me go back to questions. We’re going to get out of here in 10 minutes. 10 minutes. We are done. I got to cut this off. All right, let’s go into this. It’s been a good one today. We’re having a lot of fun today. I feel all right, throw up some likes. If you haven’t thrown up a like yet, get a like going on the stream. Okay, let’s find my spot. Find my spot. Are you going to WordCamp US? Probably, but I’m not a fan of Portland.

1:30:06
I’m a fan of Portland, I love the scenery in Portland, not a fan of the rest of Portland.

1:30:14
Let’s just say that.

1:30:16
And I’ve been there. A lot of times with WordCamps, I look to places I haven’t been yet, because I do love the travel aspect of WordCamp, right? Come on, man, choose a city I haven’t seen yet. I haven’t seen a ton of them.

1:30:28
Okay, just choose one I haven’t seen yet. Now we go Portland. Like DC I loved because I was like, I haven’t seen DC yet. Love to see DC. So that was a good one.

1:30:39
You’ll love the real pizza in Italy.

1:30:40
I hope so. I hope so. I’m not getting my hopes up because you know what happens when you’re like, oh, it’s gonna be, it’s gonna be so good. Then you think maybe you let down a little bit.

1:30:49
So I’m just like, you know what, pizza? I’m just gonna go there and see what it’s like.

1:30:55
Let’s see.

1:30:56
Kevin, why don’t you apply to talk? Because so honestly, well, first of all, well, okay, I’ll just get the honest answer is I don’t feel that they would accept anything that I submit. So why do I play a game that I don’t feel like they would allow me to participate in?

1:31:20
Why wouldn’t they allow me to participate in it? I don’t know, for various reasons. But it goes back to, I don’t think the talks are chosen based on substance. If I felt that they were chosen, I don’t know exactly what they’re chosen based on.

1:31:33
But I know, high probability, that they’re not actually chosen on substance. I would be submitting a talk of substance. And so you’re asking me to submit, you’re asking me not just to submit to something where I feel like it’s not in alignment with whatever they’re doing, but number two, it takes a lot of time and work. Like I have to, I’m not just going to submit the idea for the talk. Like I, I want to put the talk together and I want to make sure I really believe in the talk before I then submit the talk.

1:32:03
So that’s a lot of work to do for a scenario where I don’t even think they’re going to acknowledge it. So it’s just not motivating to do that. Now, if I hear otherwise or differently, or I start to see differently in the talks that are being listed, then I will absolutely consider it.

1:32:22
I just talked to the R3 conference. I want to do more speaking. I want to do more events. But it has to be an event that I feel is like, you know, accepting of what we’re, you know, about. Let’s see. What would if you could be a speaker at WordCamp? What would be your current number one

1:32:44
topic? I mean, it’s a really, really good question. There’s so much, there’s so much that we could hit on.

1:32:52
I’ll put a list together.

1:32:54
I’ll put a list together. And then I’ll have people vote,

1:32:57
which one I should go with first.

1:32:59
Then I’ll submit, how about that? We’ll do this together. We’ll do this together. I’ll put a list of ideas together. I’ll let my community vote on them. So this is a, based on my community vote on them.

1:33:14
So this is a based on my community saying that that’s the talk we wanna see, then I’ll submit it. And we’ll see what happens. How about that? We’ll find out together.

1:33:25
How about that?

1:33:26
Okay, let’s do it. I think we should do that. All right, two more questions. Can you quickly go through adding a frame and using BEM? I’m having an issue with it creating new classes and not renaming them,

1:33:38
not sure what I’m doing wrong. Um yes I can do that. So let’s go to here’s the ACSS 101 install probably good enough. All right let’s go to pages let’s go to edit. Okay, so this is all different.

1:34:00
I’m not used to this yet.

1:34:01
Usually the templates is over here.

1:34:03
I gotta go find it over here. Okay, let’s do like footer mic maybe. Here’s a new footer that we’ve done. Now we do have some, you know, it’ll be nice when the bricks lag. This isn’t on the latest, latest version, I don’t think.

1:34:16
Actually, maybe it is. Actually, maybe it is. Yeah, there’s still a little bit of the lag. You saw the all the rendering that had to be done for this Okay, but why why because you have to nest a lot of DOM elements to create the proper structure for this nav But okay, let’s take a look. So we’ve got footer Mike which is footer has footer Mike on it Okay, so that that all makes sense then footer Mike has an inner. Okay, and then footer Mike has a nav.

1:34:51
So we haven’t found any unique children yet, right? Footer Mike has a nav list. And what I’m looking for would be like legal, legal. So here’s legal meta alpha has no relationship to footer Mike, right? So what I’m gonna do is I’m just gonna auto-bend this

1:35:09
and we’re gonna see what is this going to do for us. So if I wanted this to be like footer or something I don’t want to be footer Mike I just wanted to be footer. So it’s gonna rename all the classes footer enter, footer nav, nav list, all that’s good, all that’s good, all that’s good. So this is a scenario where you can literally rename all of them. Okay now what’s going on here footer underscore CTA, footer heading, footer

1:35:35
text basic, footer button. Let’s go look at that. What is that in the sidebar? Okay. Heading, basic text. Ah, actually, cause this is a, this is a brand new frame. So footer mic CTA, yep. Footer mic. Okay. This actually didn’t get classes. This was a, and this actually didn’t even get labeled properly. This is the description. This is the button.

1:35:57
So I just found an error in this particular frame has nothing to do with Auto BIM though. Auto BIM’s excluding those because it didn’t have classes at all. It couldn’t, it didn’t know that this was actually part of footer mic, right? Because they don’t have any classes at all,

1:36:12
just because it was a mistake on a frame that I actually made this frame. So that’s on me. If it had the classes, they would have been selected too. Now you could say, no, I actually do want to include these. And actually I want that to be a description.

1:36:25
You could do it right from here and fix it yourself. So that would be fine. But notice that it did automatically take out the legal stuff. Why? Because that has a different class on it,

1:36:37
denoting that that’s its own thing. That’s its own thing. And so it’s correct to exclude those. You would just hit apply classes and then it would reapply. Now notice everything flashed and regenerated, right? Cause now when I click on something,

1:36:50
it’s just gonna say footer. It no longer says footer Mike. It got all new classes, but all the styles got carried over to those new classes. So in this case, it worked just fine, right? Now that’s a scenario where pretty much

1:37:02
except for those footer meta links, everything belonged to the parent. There are scenarios where not everything belongs to the parent. So let’s get maybe feature section Zulu. Now that’s gonna all belong to the parent

1:37:14
because those have to behave a certain way So let me go to What would be a good one? It’s a lot of times gonna be things with cards like this things with obvious like modularized Stuff so this card is feature card Yankee. That is a different thing from feature section Yankee, right because you could theoretically just take this card and use it anywhere.

1:37:37
You could use it in any grid, in any section, and you would want it styled independently. So it’s its own independent kind of component thing. And then the grid, because you could theoretically put this grid in any section, right? It’s its own thing, feature grid Yankee.

1:37:53
So we have feature section Yankee, which is its own thing, which houses feature grid Yankee, which is its own thing, which houses feature card Yankee, which is its own thing. This is the modular nature of frames. And so when you’re doing auto BIM, you can’t just re name from the top down because that’ll screw everything up

1:38:11
because you’re telling it all of those things are element children and they’re not all element children, right? They’re not, um, they’re, they’re blocks in themselves. Introduction Delta is a block in itself. Grid Yankee block in itself. BEM block element modifier. These are blocks. When you’re auto-bimming, you’re mainly auto-bimming for the elements that are in something, not

1:38:38
other blocks. And it doesn’t know, there’s no way for it to know what is a block versus an element because the structure panel makes, insinuates that they’re all elements because they’re nested, but that’s not how BIM works. BIM is an understanding of, okay, no, there can be blocks in blocks. So what you do to rename in this regard

1:39:00
is you go inside out or bottom up, right? So you go to where there are no more blocks. See, feature card Yankee is a block, no blocks inside of it. It only has elements inside of it. So I would auto BIM feature card Yankee, right?

1:39:15
Rename all these classes. Good to go. Good to go. Then what I would do is feature grid Yankee. Now let’s look at the structure. Feature grid Yankee has no elements inside of it. It is a block that is element lists. It only has other blocks in it. So you don’t need to, there’s nothing to BIM here. There’s nothing to auto BIM. All you have to do is rename it.

1:39:37
So you literally click this, click the pencil, and say, and that’s actually on the, I need to choose the grid. Okay, now we have the grid chosen, rename, and just say, like, this is my feature grid. And then hit enter, and it renames it. There’s no auto-bimming here, because there’s no elements, right? There’s only blocks and blocks.

1:39:55
So you just need to rename the class. And then up here, FeatureSectionYankee, same thing. There are no elements in FeatureSectionYankee. There, I don’t know what Bricks is doing right now. Let’s refresh this. There are only blocks in, okay Bricks.

1:40:11
This is a beta of Bricks by the way. Maybe that’s something I should report. I don’t know. Which one were we doing? All right, let’s go feature section Yankee down here. Okay, there we go.

1:40:21
So feature section Yankee, again, look at the structure. Open it up. Block, block, block. No elements. So should not be auto-bemmed, right? Bem is an element-based feature.

1:40:31
It’s a thing that we do with elements, not a thing that we do with blocks. So I would just rename the block, rename this block, rename this block. Actually, this has elements, so you can auto-bem this if you want.

1:40:42
So see how it’s fr-intro-delta, all right? You can auto-bem that, no problem whatsoever. But don’t think that when a block is isolated and it has no elements inside of it, just rename it. That’s not an auto BIM situation. Now, with all of that said,

1:40:59
auto BIM 2.0 will allow you to rename from the top down. Because we’re gonna essentially add a feature where we can just identify. You just go in and go, oh, that’s a block, that’s a block, that’s a block. Or hopefully it’s going to automatically recognize

1:41:12
that might be a block and have you confirm. And then you just go, yeah, yeah, yeah. And then you can literally rename from the top down. That’s gonna be AutoBIM 2.0. But AutoBIM 1.0 is an inside out tool. You start on the inside and you work your way up.

1:41:26
Now, also I should say, as always, AutoBIM was not created for this purpose. This is not what AutoBIM was created for. We’re able to use AutoBIM to speed this up a little bit, but you’re using the tool for something it wasn’t actually designed to do, okay?

1:41:44
It just happens to work if you follow that process for that specific thing. AutoBIM was designed for people who build from scratch. So for example, if I wanted to build this as a card, so I would put a div in, or you could use a block, whatever you wanna do, and we’re gonna call that a card.

1:42:00
And then I say, well, we’re gonna have two blocks inside of that card. One’s gonna be a media wrapper, one’s gonna be media. I put media inside that card, and then I come in here and I put a heading, and then I put text, right? See me race through this, then we put a button in.

1:42:11
Okay, great, fantastic. So I’ve got all of my elements that I actually need, and then I click auto-bim on that div, and then I can name everything. And I wanna say this is a card, and then this is actually the media wrapper for the card,

1:42:22
and this is actually the media. This is the content wrapper, this is gonna be the heading, that’s fine, this is gonna be a description, this is gonna be a button, all good. I’m gonna sync the labels and I’m gonna apply classes.

1:42:33
That’s what AutoBIM was designed for. Because now I have a card with a media wrapper and a content wrapper and I’ve got classes on everything and the labels are all the way I want them and I can just start designing. That’s what AutoBIM was designed for and created for.

1:42:47
And you can see that instead of adding a class to every single thing independently, manually, that saves a tremendous amount of time. That’s what AutoBIM was designed for. It just so happens that you can use it for renaming frames. You just have to know exactly how to use it, okay?

1:43:06
But AutoBIM 2.0 will make it dead easy to go top-down renaming of everything. Man, that was a long answer, wasn’t it? Okay, last question. Hate being this guy, but you keep creating the frames. Where’s the frames for frames,

1:43:23
the frames for Figma equivalent? So, I feel like I’ve answered this question a thousand times, right? Frames for Figma is based on it’s built with something we call automatic CSS tokens, okay, tokens in Figma, not actually the native tokens in Figma, but token

1:43:50
studio, which is much more powerful than native tokens and Figma. frames for Figma has to trail behind anything that automatic CSS does. So if automatic CSS does something new, it then has to be replicated in frames for Figma, right? So we’re in the middle, I think everybody knows, we’re in the middle of a total like redesign

1:44:17
of automatic CSS, which is completed this Thursday, will be official 3.0 out of beta. It’ll be out of beta this Thursday, unless something goes tremendously wrong. Out of beta this Thursday. So being that it’s been a beta product for all this time

1:44:34
that we’ve been working on it, right? And knowing that it’s coming and knowing that a lot of stuff has changed, okay? And been updated and refreshed, okay? Frames for Figma can’t physically exist yet. It just can’t, there’s no way, there’s no way.

1:44:49
It has to wait for ACSS 3.0 to be stable, then it can be produced itself. Now, is that to say that we’re not even working on it? No, of course not. It’s being worked on, right? So Tommy is working on it behind the scenes,

1:45:01
but he can’t make it official until ACSS is official. So it just naturally has to come later. So that’s all I can say about that. It is not physically impossible to just give you frames for Figma when automatic CSS isn’t even out of beta yet, 3.0. So hopefully that answer suffices.

1:45:21
Auto BIM 2.0, what’s the timeline on Auto BIM 2.0? That is dependent on a couple things that we’re talking about in Italy. Based on the direction we go after the Italy talks, I’ll be able to give you more insight. Okay, alright, let me go to chat real quick just to check in with chat before we get out

1:45:46
of here and see how everybody’s getting on with it. I’ve tried to go a little bit longer today because we’re not going to be here next week. So praise Jesus, Auto BIM 2.0. Yes, yes, yes, yes. there may be something coming that’s way more exciting than Auto BIM 2.0. But you know, we could also focus on Auto BIM 2.0.

1:46:08
It’s just, you know, we’ll see. We’ll see what it is. Thursday ACS 3.0 official release, let’s have a virtual party. I think we should that’d be that would be cool. Can I still use my frames for Figma as the current state? Yeah, absolutely. You can do whatever you want, for sure. You should do something on auto BIM for ACS 101. I actually will.

1:46:30
I actually have that planned to do as part of ACS 101. Cause we are going to absolutely cover auto BIM. What you just saw, like from the ground up auto BIM. And then I will put a little segment in that video on using it to rename existing blocks and elements and things like that, which would apply to frames.

1:46:50
Okay.

1:46:51
Geary heads meet up.

1:46:53
I’m actually planning a,

1:46:55
I really am excited about the prospects of a live event that involves mainly like inner circle, automatic CSS, something like that. Like I really, really, really think that’s the next, that’s the next thing on the list that we haven’t done yet.

1:47:16
We haven’t even dipped our toes in that yet. And I think it would be really exciting, really fun. You know, I am an introvert. I’ve talked about this before. I’m an ambivert. The introvert in me is like,

1:47:28
there’s no need to schedule live events. But then the ambivert side of me is like, I really do like meeting people and events. And you know, if they’re, you know, if it’s a good environment, right. So I was thinking maybe a cruise kind of thing would be would be phenomenal. It’s like, why don’t we all why don’t we all go on a

1:47:46
cruise, that would be fun. And it’s like a conference type cruise. So there’s some education, then there’s just some hanging out. And then of course, you’re on a fucking cruise ship. And what’s there not to like, that would be an idea. I could do an event in Florida, I’ve got some really amazing places in Florida on the I mean, you cannot beat at least I’ve now I haven’t seen a lot of the world. Okay, but I have seen in videos I have seen in videos, it is very hard to beat the west coast of Florida, like a very, very difficult. There are some places. And then and even in like inland Florida, as some some canal types. I mean, it’s very difficult to beat some of Florida. Okay. Canal types. I mean it is very difficult to beat some of Florida, okay

1:48:31
So we can do something down there. There’s a I mean there’s so many endless possibilities of what we could do in, Florida Yeah, it’s just what you guys tell me Would you be excited about something like a live event kind of thing would that be something you would entertain? And it would it would not even need to be like gigantic. You know it could be 20 people. Like, we could do something exclusive, we could do something more general. Like a cruise type thing, I legit think could be 100 people, you know?

1:48:59
Or we could do something smaller, it just depends. But like, someone says, Sarasota, please, Florida rocks. Went on a cruise, Florida to Mexico, is that Mexico? For a conference, it was less expensive to do that than host in a convention center. Yeah, you know, I’ve heard that. So yeah, I think that’s,

1:49:17
I think it’s something we should entertain.

1:49:18
Let’s do it in Panama City Beach,

1:49:19
just went there at spring break and it was beautiful. Yeah, actually Destin, so Destin is right next to Panama City Beach. I got married in Destin on a yacht. It was, that was nice, that was fantastic. So I am always willing to go back to the Panhandle.

1:49:37
That’s one of the unbeatable areas of Florida. 30A, the 30A area, the water is fucking, it’s like a swimming pool. It’s like crystal clear, it’s like bath water. It’s like, it’s so amazing. And there’s so many spots like that.

1:49:53
Then we can go paddle board with gators. That’s always fun. In crystal clear spring water, right? I mean, that’s an unbeatable kind of scenario. I went swimming with manatees in literally crystal clear spring water.

1:50:17
If you haven’t done swimming with manatees, that’s a whole experience. I mean, there’s so much, endless, endless the things that we could do around just hanging out and around some education experiences.

1:50:28
There could be dev education, there could be agency related education. We could have so much fun, so much fun, so much value. I think it would be fantastic. Dover says bought ACSS today, fantastic. My friend, welcome.

1:50:41
Congratulations on your purchase.

1:50:43
Okay, I gotta get out of here.

1:50:44
I got some work to do. If any of you are gonna be in Italy, definitely hit me up. Like I’ve talked about before, I have resting asshole face. When I’m walking through hallways or just around in general, you might be like, that guy’s a little intimidating. Hey, just come up and say hi or say whatever.

1:51:06
It’s totally fine. You will survive and we will all be friends. It’ll be great. Anyway, I will see you guys next week if you’re gonna be there. Otherwise, I will see you the week after

1:51:16
when I get back for another WDD Live. when I get back for another WDD Live. Love you guys, thanks for the support, peace.