0:00:00
Morning, everybody. Let’s see who we got in the house today. Grant, welcome, welcome. Patrick’s here, Shannon, Carl, Michael, Andre. It is another Tuesday. I am back from Florida and we are ready for another WDD Live. What’s up, Daniel? What’s up, Derek? What’s up Marcus? And we’re doing a little bit of live development today. I looked at some of the… I looked at the agenda, like what can we do, you know?
0:00:35
It’s been a while since we’ve done any live building and I think I’m going to do this two different ways. I have one little layout, little frame that I want to create. I’ll show you that in just a second. And then what I want to do, and I kind of hinted on this in last week’s WDD Live, where we might go to an inspiration site.
0:00:55
I’ve shared one called Lapa.Ninja, one of my favorites. And we’ll go through, and if we build this first frame and then we still have some time left over and all that, we’ll go through Lapa.Ninja and we will just take a look at some of the sites in the gallery and we’ll take a look at the heroes and we’ll see, you know, we do a lot on WDD Live with like a no scroll test and we try to figure out, you know, how good is the copy in the hero section.
0:01:29
Without scrolling around, can I figure out what’s going on? Is there a really good, you know, value proposition, you know, things that we typically look for in copy. I think there’s going to be some great examples that we can look at you know normally we’re looking at sites with it need a lot of help and need a lot of work and Sometimes it’s really good to look at sites that are just doing a really great job
0:01:48
But of course there’s a lot in Lapa dot ninja that I just absolutely I think are atrocious as well So and we could talk about why you know there’s and there’s a lot of trends, okay? There’s a lot of trends in web design that aren’t so great, that aren’t so great. And I try to avoid those trends. We’ll maybe we’ll talk about that a little bit too. So this will be a nice little, you know,
0:02:12
a little bit of everything in this episode, I think. It’ll be great. Anybody is, are we okay on audio? Is audio fine? One person mentioned an echo of some sort, but I don’t know. Let me know let me know let me know
0:02:30
in the chat. Audio video good I did have to fire everything up everything’s been off for like two weeks I had to fire everything up. Sound is good okay we’re good to go we’re good to go. All right let’s take a look at let’s share screen here and take a look at what we are going to start building for this frame. Let’s open in preview here. Okay, this is from Circle’s website actually, circle.so.
0:02:57
And I really like this feature. It’s like highlighting a feature, but then gives you a list of talking points for that specific feature. And I could see where you could use this in a one-off fashion,
0:03:12
but you could also use this like, you know, section by section by section almost. If they will be one section, but all of these, you know, let’s say you had five main features, you could just stack these one on top of the other. I like the fact that it’s kind of like, you know,
0:03:28
gives that little boxed effect, but at the same time we’ve got media that’s breaking out of that boxed look. It’s just clean. It’s clean easy. I also like, you know, the trend lately, the trend lately is to hide everything behind tabs. Like everybody, oh my gosh, the internet is so tab heavy.
0:03:50
Okay, everything is behind a tab. I like the fact that this is not behind a tab. This is not using tabs. Everything is, you can just see everything. You can access everything. Yet it’s still clean and it’s not too packed. I don’t like the little orphan that they’ve got going on here with the headline, but that’s not really a design thing.
0:04:12
It’s more of like a dev issue. Yeah, so overall, I think this section also, this little section also presents us with a challenge because we’re gonna talk about how, there’s many ways to do this little background boxed effect thing.
0:04:30
And we’re gonna have to talk about maybe pros and cons for different methods and actually see what a potential problem could be when you don’t know the exact height or length or amount, I guess we could say, of content that’s gonna be in this section.
0:04:45
Because I could easily see, there’s a few ways to achieve this where as soon as the content gets a little longer you actually don’t Get the overlap effect anymore. It actually looks broken. So we’re gonna have to talk about that a little bit Okay, let’s see what chat’s doing and then we’re gonna go okay Justin says oh, there’s gonna be a great frame All right. Good. Good. Are we are we you know, the goal of frames,
0:05:17
you’ll see when we go through Lapidot Ninja, some of the examples and things like that. Another trend is that everything in web design now has to be over the top, and it’s gotta try to win design awards, and it’s gotta, everything’s gotta have motion,
0:05:28
and it’s gotta have, oh gosh, it’s so atrocious. It’s really, that’s, I don’t like this trend. What you’ll typically find is just simple, clean, put the focus on the content type layouts, convert like gangbusters and then all the fancy shit just gets in people’s way, just distracts them, kills conversion rates, it’s annoying. Alright, we’ll get there when we talk about Lapidot Ninja but this is the kind of layout that actually allows you to get your point across,
0:05:59
doesn’t distract people, just gives them the like stuff that they actually need to be able to convert. So I really like this this layout. All right we got a Dave then in the house. Got Merrill, Merrill. Ground Pets good to see you again. Mark Peters is here. Patrick, Maddy. Maddy’s in the house. What’s up? What’s up? Amanda. Okay we got a good crew. We got a we got good viewership. Let’s go ahead and get cracking. So this is gonna be a feature section,
0:06:30
it’s gonna be in our feature category. So I’m gonna go over here to Bricks Templates, and I’ll show you the publishing of the frames too, like a little bit of the process of like, okay, it’s not just building the frame and hitting publish. Okay, there’s some other things that we gotta do.
0:06:46
But what we’re gonna do, what I typically do, is I go feature, I search feature section because in my head I don’t even know what we’re up to here so we’re actually in Z we’ve gone past Z with feature sections already I think we’ve used every we’ve used every word in the UN alphabet so we’re back to the we’re back to the A’s okay this is another question I’ll just ask everybody in the chat me what do we go to next we
0:07:10
did we did the UN alphabet for the first go round A through Z, what do we go to now? What what what any suggestions in the chat? What do we go to now? I mean, I could go to like fruits, you go like apple. What do you guys think we should go to? I didn’t even foresee this happening. It’s actually a good okay. AUS phonetics. What does that mean? AUS phonetics
0:07:41
Star Wars characters Okay, okay shout out to Australia, I guess I don’t know if that’s the best way to go though Okay, let’s let’s do hmm how about Hmm Isn’t the NATO alphabet the same? I don’t I don’t know. I don’t know about that. Latin, Latin,
0:08:52
Latin alphabet. That we need. Okay. Well, come on now. This is I don’t I don’t know how this is going to work. No, it’s too confusing. I never liked Latin vegetables. Okay, let’s just do how about this? We’ll do cities. We’ll start with cities. ASL, alphabet, emoji. Let’s just do a city. I’m just going to call this Atlanta. We don’t want to spend too much time on this. Let’s go in here. This is going to be feature section Atlanta. Feature section Atlanta. We’re going to make
0:09:36
All right, so we’re gonna make this a section and we’re just gonna save this as a draft for now. We’ll go ahead and edit. Let’s clear these out. The good thing about Bricks, obviously, is I can rename these classes anytime.
0:09:48
We don’t actually have to make this decision right now. We can come back and make it anytime we want to. Very easy to rename classes. Okay, I need to make it easy to get to my preview here. So essentially, this is quite interesting here. We’re going to use probably the section container for,
0:10:09
and this is going to be a time where you, okay, do we want to, we also got to think about query looping. If people want to put features into like a CPT or something, and maybe potentially, we have to think about the potential for query looping all of these. I’m gonna start out by and this may change as we get through this but I’m just gonna start out with just using the container that comes in the
0:10:33
section we’ll put our intro in there we’ll put our list in next we’ll put our media in next and I wonder I’m just wondering if everything should fit within the same container. So I’m just gonna add this section here okay and if we look at this again, what we would need, I’m still gonna group things, so we’ll use a block. What is this?
0:10:55
Get rid of this. All right, let’s go back to preview.
0:10:58
Okay.
0:10:59
Can the preview stay open?
0:11:01
Thank you.
0:11:03
All right, so we’ll just use a block for the intro. I’m still gonna group associated content, so we’re gonna use a block for the intro. We’re gonna use another, we’re gonna need another block for our list. And then we’re gonna need a block for our media wrapper.
0:11:18
Okay, all right.
0:11:21
Okay, I’m really, I’m thinking a lot about that, how we’re gonna do that, how we want to do. Because again, there’s multiple ways to do that little box back there. If I just do three blocks, that essentially gets me my three content groups.
0:11:39
Okay, so this is gonna be feature, section, Atlanta. And then this is gonna be the inner. We’re gonna call that the inner, at least for now. And then this is gonna be the intro. This is gonna be the list. And then this is gonna be the media wrapper.
0:11:53
Okay, and then in the intro, we’re gonna want obviously a heading. And then we’re gonna want a lead paragraph. All right, that heading is gonna be an H1, that lead paragraph is gonna be an actual paragraph. Once we have our list,
0:12:10
and you gotta do this in the builder a certain way here. So we need another block, the list is gonna be a grid, we’re gonna need another block for essentially a list item. And then we’re gonna need an icon, and then we’re gonna need a heading and not really a heading it looks like a heading but it’s not really a heading so let’s put a block in here we’re gonna call
0:12:33
this list item and then inside of our list item this would be good for my brain too because I’ve literally been two weeks of building nothing so except for that little live stream that we did so this is going to be the list item List item label, okay? List item icon. So we’ll do list, list item, list item icon,
0:12:56
list item label. That seems like it’s gonna be pretty good. Let’s just pop an image in here for now. And let’s use one of our placeholder images. So we have a whole gallery of just kind of like, you know, random images that we can throw in here.
0:13:11
Let’s go with here. Let’s do like, oh, that’s a tall one. Those are all pretty terrible. Okay, do we have no wide product images? Nothing there, nothing there. I don’t want a tall image.
0:13:27
Okay, let’s just throw in a photo. That’s all we need for right now. Okay, let’s go with a large, I hate how it, look at this. When you first open this, it doesn’t show you the options that are above it You know bricks can really improve some of this stuff. Let’s drop a figure tag in there
0:13:46
Alright, so we’ve got our media wrapper. This is gonna be our media This is gonna be one of those frames where everything lives within this frame. There’s really no modularity to this one It’s just you get what you get in this frame, okay? All right Ruben was cooking breakfast and forgot.
0:14:05
Tsk, tsk, okay.
0:14:06
I’m just, I’m ready to auto-bim this, I think. I think we’re ready. We may not have everything we need, but I think I’m ready to auto-bim. So we’re gonna go Features section, Atlanta. I’m just gonna let everything else make itself.
0:14:16
Let’s see if this all makes sense. Intro, enter intro heading, lead, list, list item, list item icon, list item label, media wrapper, media, I don’t know, looks good to me. Okay, let’s take this intro right here, and let’s center, and let’s go ahead
0:14:35
and put our content gap in here. All right, this is gonna be a, oh, and actually, I was thinking hero in my mind. This actually needs to be an H2, not an H1. It’s not a hero, it’s just a feature section, okay? All right, feature Atlanta, there you go, I don’t know.
0:14:54
All right, let’s go to website Ipsum, let’s just grab a little bit of lead text right here. And we’ll drop that in. And we’ll come back to that in just a second. This main container, this inner right here, we’re gonna do our content gap on this as well for now.
0:15:15
Okay, let’s get this list situation under control. Let’s just pop a bunch of list items in here for right now because I want to see what this grid is gonna do. So we’re gonna display grid grid template columns to gap grid gap. Okay, that works out pretty well. Let’s take this list item and I think what I’m gonna do here is also display grid and we’re gonna go with auto,
0:15:39
and then grid one. And then we’re gonna go with centering everything. I hate Bricks’s grid controls. This is the wrong icon for the type of centering that we’re currently doing here. Bricks needs to dramatically improve this flex situation
0:15:56
that’s going on here. Content gap, no. We want to do something static. We want to do something like, we can actually just go to Ms in this situation. We can do like 0.5 Ms, something like that. These icons, we do not want to use an icon library. We always use just a plain old SVG. And what I’m going to do is go to icons, and we’ll just do something similar We should have I don’t feel like it’s showing me the whole library. I’ve got 68 icons It’s not showing me 68 things it insists that it’s showing me 68 things 1
0:16:37
4 5 6 7 8 10 11 2 3 4 5 6 ok I guess it is well Where’d the other icons go are they uncategorized are they in all files ok then there’s some. All right, let’s go to use this check mark right here. And this little circle check mark, we’ll start with that. Doesn’t really matter. The user is ultimately going to swap these things out. So we just have to use one that looks a little decent. All right, let’s go back and see our inspiration again. They are using a solid one, but it’s okay. And really these are just like one line,
0:17:15
one line items, cohort based groups. Okay, so feature, this is a feature. Okay. And then I can just delete these now. And then we’ll get the, now that I’ve got the grid situation all fixed,
0:17:29
let’s get the tags done. So this is gonna be an LI. This list right here is gonna be a UL. We’re going to take off of the margin 0, 0, 0. When you put things into a list it adds all this default spacing that we don’t actually want so we’re going to get rid of that. Let’s go 2, 3, 4, 5, 6, 7, 8. Let’s not gap with grid gap, let’s gap this with,
0:18:02
I would say, let’s see what content gap looks like. And then we might just do half content gap or something. Let’s go back to our preview. Yeah, yeah, it’s a little bit closer together, right, than their normal content gap spacing. So I think it makes sense to just half it.
0:18:21
So now that content gap’s there, I’ll just do slash two and hit enter, and now we’re good there. Now the other thing I’m noticing that we probably want to kind of replicate is all of these, it’s more squished, right? This isn’t actually, the block is the content width
0:18:36
of their website, but the content inside is not the content width. It’s skinnier than the content width. And this might make sense where we go to something like a character count, okay? Let’s just play around with it. Now to do this, what I’m thinking of doing is
0:18:58
essentially we’re grouping our content, so all these are groups, and we can just target the direct children of the inner and say that, all right, it’s going to be 60 characters now, right? That would be just the the normal width. So I can go to the CSS down here, and I can say that every direct child of this inner, is going to be width of 60 characters, and it’s going to do that right there.
0:19:28
I can say margin inline of those is going to be auto as well. Now, you could use flexbox controls to do this, but I think this is probably the easiest way to do this. And what do we want to call this? Because I usually like to abstract this away so that people don’t have to find it.
0:19:46
I’ll show you what that means in just a second. But if I do something like this, I don’t want to use my content width. We’ll say inner content width, right? Inner content width. And…
0:19:56
And I’m trying to figure out why it’s acting like that has a value already. It shouldn’t have a, okay, maybe it’s just bricks acting up. All right, so the width is inner content width, and then I can come up to feature section Atlanta, and I can essentially say the inner content width is 60 characters here. Great, fantastic. Okay, nice, nice, nice.
0:20:26
Now, essentially what we can do, and you have to do this because Brics has a little bug where it doesn’t tell people that there’s custom CSS. So we put a little badge, this little CSS badge, kind of alerting them to like,
0:20:40
hey, this is where you want to look for changing certain things like with some custom code that we’ve done. But now, they don’t even have to know where the content width is, what that direct child selector situation, they don’t have to know any of that. They just see that this has CSS, they open it up,
0:20:56
they say, oh, there’s an inner content width, okay, let me tweak that real quick. And they can just put in any value they want and everything kind of just works for them. So that kind of makes it nice and easy. All right, this one we want to go to style typography,
0:21:11
text align to the center. Okay, these we want to and let’s check our DOM situation here. Just go to the front end and just right-click and just make sure that we’ve got our proper list structure going. So we’ve got our ULs, we’ve got our LIs, nice and clean. We’ve got our icons in there. I’m thinking our icons too. Okay, see this text right here is a div, not super great. We’re gonna use a span in there.
0:21:38
Let me go back here. All right, so let’s open our list, list item. There’s our label right there. Let’s just use a span for that. And then we’re gonna go delete, delete, delete, delete. And then we’re gonna duplicate, duplicate, duplicate.
0:21:53
Okay, four, five, six. How many did they have? Six, okay. And what we wanna do is make those, make that span, this label right here we want it to look like probably like an h3 now that’s going to depend on we can maybe make it
0:22:11
an h4 that’s going to depend on well I’m gonna do a 3 because 4 is just going to be like basic body text now I don’t have this doesn’t have the new automatic CSS version 3.0 in it. So I can’t use the, I don’t think all the variables exist of like h3 weight and things like that. But they do in 3.0.
0:22:33
And that’s, we’re in a little bit of a limbo situation right now where because it’s still in beta, the frame source site is not on 3.0 yet, which means we don’t have access to 3.0 features, even though we’re building, you know, essentially like, you know, for 3.0 users.
0:22:51
So that situation kind of sucks a little bit. But let me go back here. All right, so, all right, I think we’re all right. We’ll kind of manually set the font size for right now, or the font weight. Not the ideal situation, but until we get on 3.0, we don’t have the variables available to us.
0:23:11
And then this is also going to depend on, I think 700 is the standard bold, so we’re gonna do that. It doesn’t look all that great with this particular font situation and heading sizes, but again, this is why, you know, this is the start and you have to tweak it. You’ve gotta make it what you want it to be. Okay, let’s go to our media and we’re just gonna put, essentially by default, we put
0:23:32
our radius on everything, because your site’s radius, boom boom, you know, determines whether you actually want a radius. That’s like a global value. So on sites that have that set to zero, they’re not gonna have a radius. And on sites that have a value,
0:23:47
they’re gonna have the value that they requested, kind of out of the box. So that’s how that variable works right there. All right, now let’s think about our, our boxed like background situation here. We also want to determine if we want more spacing
0:24:03
between these items. So let me go back to our preview here. And I think we do. I think we want more of like a container gap kind of situation between these, or you can just double essentially the,
0:24:15
since they’re not actual containers, probably you’re wanting just more content spacing between this content. You’re probably just gonna want to double your content gap here. You can even go like times 1.5 or whatever but let’s just see what times
0:24:29
2 brings us and I think that’s that’s pretty decent. Alright let’s get our background situation in. First thing I think a lot of people go to is a gradient. So we can do and I want to probably use we’ll use the bricks main I’m instead of writing CSS for this we’ll just add two colors here. All right so and we’re just I don’t even care what they are right now I’m just gonna throw them in. One is gonna be transparent. Transparent. It helps if you spell it correctly. Okay and then what
0:25:05
we’re gonna do is go 50. What is this what is the deal with this like? Oh okay. Oh, okay, if you make the sidebar too small it breaks that little variable button right there. Okay, anybody from Bricks here? Are they watching? Are they watching? Little, little issue there. Okay, I’m not a big, I’m not a huge fan of this method right here. I’m almost tempted to use, the one thing I want to think about though, let’s, let’s do this. Let’s do
0:25:38
Black trans 20 something like that. Let’s make that 10 Actually, maybe you know, maybe maybe it’s not so good to use a transparency right there. Let’s do neutral Ultralight Okay. All right. That’s that’s decent somebody’s if they want color. They’re gonna put their own color and they’re gonna do whatever they want there. Now what we need to do on this inner situation here, we definitely need some top padding okay let’s go and we can use our we can use our section padding here probably
0:26:16
probably ideal okay now we’re getting somewhere let’s go see this on the front end it’s coming to life it’s coming to life now the thing I’m concerned about is if this content gets longer and longer is our percentage value on our gradient going to keep up with us okay or are things going to start to unravel. So what we can do is we can go test that real quick and typically what I do is just something obnoxious like just duplicate this. Alright so in this case I think see how it starts to lose its overlap position?
0:26:53
But I mean, this is pretty egregious. This is an egregious amount of content. This frame is not designed for this amount of content. So the fact that we’ve gotten this amount of content without the overlap really being lost, I think is okay. Now, one thing I’m gonna do to make the overlap
0:27:10
easier to control so that people don’t have to hunt it down is, I’m just talking out loud here, I’m just going to use some locally scoped variables, okay, for the percentage on the gradient. And so let’s go back to the gradient which is on our inner right here and we’re going to see that we’ve done a 70% and a 70%. Let’s let’s call this background, we can call it the background, these are called stops, right?
0:27:42
You can call it background stop.
0:27:43
Hmm, hmm, hmm, hmm, hmm, okay.
0:27:47
All right, let’s do background stop.
0:27:49
We can call it BG stop, just to like abbreviate it. I’m not a big fan of abbreviations, but pretty much everybody knows what BG means, right? So BG stop, now if I go back up here, I can say BG stop is 70% and now we’re back. But now what I’ve done is I’ve taken that value
0:28:14
that’s kind of buried in panels and people may not even know how that background is done. Right, so would they even know to click here and then go to gradient and then find the color stops and then that’s where that value is going to be. I mean you know yeah some users will but a lot of users won’t and and why should you have to dissect to that degree right
0:28:37
to use the frame? You shouldn’t have to so we abstract that away into now you when you go to features when you add feature section Atlanta you see hey buddy check the CSS tab that’s what this is saying right here. You go to CSS and you see the two things that you need to know to customize this frame that are a little bit buried. They’re just kind of right here sitting here for you. No worries whatsoever. I can even put comments here as to what these things do, which I often do. But this
0:29:06
makes this look, I’ll go 80, see I can just change the overlap to whatever I want essentially from right here, this one little point of control So I think that’s pretty that’s pretty handy Okay, by the way, if you want to ask questions as we go through this kind of stuff by all means ask questions Just make sure that you use hashtag question or hashtag Q so that I can sort them and find them
0:29:29
All right. Let’s see what chats up to Okay, good good good. All right, we’ve got some questions about the icons. All right, all right. Okay, yeah, we got a bunch of questions coming in. Zoom in and minimize your browser’s left side panel. I don’t like to build zoomed in, that’s the problem.
0:29:52
I mean, I can hide the side panel, but you know, okay. It’s like, does that give us a ton more real estate to work with? Not really. Okay, now what you could essentially do, check this out, you can, if you duplicate, not the feature section,
0:30:10
okay, let’s not do that, let’s get rid of that, let’s go back to this. Okay, actually, so I’m already seeing an issue, feature section Atlanta, this needs to be feature, right? Instead of inner,
0:30:23
because we don’t want inner, inner, inner, inner, inner, let me just, let’s do this. Let’s just rename that class. I think this makes more sense. So you have feature section Atlanta, and then here’s a feature, and then here’s another feature,
0:30:35
and then here’s another feature, and then here’s another feature. Like I said in the beginning, you could potentially stack these. You could also potentially query loop them. Now we’re gonna see the bricks lag
0:30:44
because we’re duplicating. Anytime you duplicate something, get ready. Just, you know, take a breather. It’s gonna take a second to pop in Okay, so oh This is interesting too. Oh, okay
0:30:57
Let’s let’s do this. Let’s go row gap. Let’s go container gap on this Let’s go back to Okay, this is so we’re revealing now by by duplicating content we’re revealing one potential issue one potential issue, one potential issue here. Let’s first go to style, let’s go BG stop 70%.
0:31:21
Okay, so the 70% as a kind of like a global control point for this section only really makes sense if all of them have the same amount of content. Like if I duplicate this, if this one feature block has a little bit more content than the others, the overlap is going to be different. Now the good thing is, I just
0:31:46
don’t know that users would know this, but like on this feature right here, all I would have to do is at the ID level, because this is a unique thing about this, right? A unique feature of this feature right here, you can do BG stop and you could just redefine it. You could do like 80%. Okay. That this is the power of locally scoped variables. Like they make this kind of on the fly adjustment, like very, very,
0:32:11
very easy. Right? So it’s 70% in all the others, but now it’s 80% in this one. Why? Because this one had more content. Now what I was thinking when I first saw this is, is there a way where we could make this perfectly map to the height of the content. And I just don’t know, I just don’t know that it’s possible,
0:32:32
at least off the top of my head, I’d have to give it a lot more thought and thinking. I mean, I’m sure there could be something that we could come up with. Percent does a fairly good job, but it’s not perfect as you see.
0:32:49
If anybody has any ideas in the chat for how to map this so that every image essentially could have a perfect overlap. It has to be mapped to where the image is, I think, in order to do this. We could do this for sure with a pseudo element,
0:33:06
but it would have the limitation of this inner, this feature block needing hidden overflow. Now, hiding overflow, what would be the downside of that? You couldn’t use pseudo elements, like if you need a pseudo element that broke out of this feature block,
0:33:31
you wouldn’t be able to do that with overflow hidden. So that would be a limitation. Now, what are the chances of that needing to happen? Probably low, but it is a downside. It is a negative. Now, if you’re interested in seeing the… Now, oh, well, here’s the problem. If you, for some reason, decide you don’t want media, well, I guess at that point you would have to rethink this whole situation because this is based on media being here. Like if this media was not here,
0:34:03
this would not look all that great. Like you’d have a gradient background for no reason, essentially. So this is kind of banking on this media being here. You can also make the media bigger. You could do like content width,
0:34:18
divide 1.5. Let’s see what that does. Let’s do 1.25, are we getting, yeah, yeah, yeah. That essentially works as a, okay. See, this content with variable comes in insanely handy, like over and over and over and over and over again.
0:34:38
So essentially what I said is everything in this feature block be 60 characters wide. But now we want to kind of override that with the media. And the media can be its own width very easily. And then what width should it be? Well, we could just base it on the actual content width.
0:34:58
That actually works well. It’s really depending on what you decide you want here. I actually kind of liking that a little bit. Not really liking the feature being, here’s what it looked like before, right? It feels like the media is a little too small for me. I mean, that’s what they did.
0:35:18
Let me get rid of this extra block that we don’t actually need. Let’s go look at our source again. Okay, there’s a little bit bigger. Well, yeah, yeah, I guess it is a little bit bigger. Their intro also was brought in smaller. Hmm, how do we want to do that? I think these two work fine together. I do think the media definitely needs to be bigger. So let’s go with our media wrapper and let’s let’s bring that back to where we were. Essentially this. Now do we want to do we want to provide a front-end variable for that as well. Let’s do media width just
0:36:05
like this. Okay, let’s go back to our CSS and let’s just drop this in here. Give them another control point. All right, media width is going to be, and now we can say the content width, right? If I do content width it’s literally going to be content width. But then I can take that and I can divide it by 1.25 or whatever. And then, you know, just gives them a control point from our main little frame
0:36:34
on whatever they want to do with this. They can just kind of dial this in to whatever they want it to look like. And I think 1.25, pretty sensible little default here. Okay.
0:36:46
All right.
0:36:47
Now, I don’t have the benefit in this live stream of what I often do is I’ll get it to like 90% and then I’ll just leave it and I’ll just go let it marinate for a while, right? And I’ll just, then I’ll come back to it, you know, like a few days later and I’ll just put like fresh eyes on it
0:37:07
and see what we’ve got going on. And then I’ll think about some things again and but you know, we don’t really have the benefit of just sitting around for days and refreshing our brain on a live stream. So, anything before we close this one up,
0:37:19
I wanna get onto the Lapa.ninja segment of our live stream today. But anything here, let’s take a look at our responsiveness and see what disaster we might have to deal with here. Let’s go in with our feature and let’s go ahead and put, do we wanna use, we’ve got a gutter here
0:37:43
maybe we may just want to go with gutter again just use two little gutters here let me see what that produces pretty decent pretty decent we obviously need our grid to stack probably there okay so while I’m here we’ll just take that list and we’ll go grid 1. Okay and that’s gonna stack those features. Now I think a lot of people would make the mistake of like trying to center these and all that. Now that doesn’t need to happen. What needs to happen is all this stuff needs to go back to the start.
0:38:17
We’ll go typography left align. This is gonna make that nice and clean. We’ll still allow the overlap right here. At some point I think we’re gonna need to stop overlapping that and just put our normal background in. Okay yeah how do we want to handle this probably with our grid stop again or our BG stop. Let’s take a look at this again how this is gonna degrade down through the break points.
0:38:53
Overlap still makes sense there. Overlap is not even, not even really there there.
0:39:01
Okay.
0:39:04
So I’m thinking here we go, let’s bring in our section padding and probably change our BG stop and what breakpoint is this the the thing I hate about referencing Breakpoints manually is that so I’m going to do this here Which is going to be a little bit of a pain in the ass because because it we can’t statically reference breakpoints and frames Unless it’s like mandatory because not everybody has the same breakpoint values Let’s go with
0:39:33
Let’s just take BG stop at 100 percent, probably the way to go. Now, that essentially just makes it look like it’s a solid background color on this feature block. We can also decide here if we want to change our gap. Because our gap, little aggressive there
0:40:02
Maybe we could just go to a straight-up content gap now that it’s such a small device and That’s going to look pretty pretty nice and uniform All right, I think we’re all right Overlap no overlap everything looks solid block at that point now the other thing I want to do is on that feature we need to you know if people have a radius set on their site they’re gonna want it on this feature card right here. So we’re gonna go to border and we’re gonna put in our
0:40:35
little radius token and that’s gonna get them their global radius by default automatically. The one thing it’s not going to do oh here’s the other problem here’s the problem with the gradient method. The problem with the gradient method is this is supposed to look like a boxed kind of situation. Let’s go back to our let’s go back to our preview. See ah yes okay see see we’re not gonna be able to radius that gradient. It’s gonna have to be a pseudo element. See now we got to change our
0:41:12
whole our whole situation up. Let’s go take a peek at the chat here. Your color background needs a border radius of the gradient. It’s not really an option. Yep see we just see other people saw it right and I said there’s gonna be multiple ways to approach this and they’re gonna have pros and cons and you’re gonna have to figure out you’re gonna have to figure out what cons you’re able to deal with and what cons are gonna be a deal-breaker right. It’s a
0:41:36
deal-breaker for the gradient because if they need a border radius they’re going to be what we call shit out of luck. So the whole gradient situation has to go away. Alright and this is the this is the challenge of when you’re building frames you have to build frames that work on like all different kinds of sites. If we were building a site where it’s like we don’t need border radiuses because we don’t have radiuses on this site we could use the gradient.
0:42:02
But that doesn’t work for everybody. So we can’t really use the gradient approach. So knowing that, I’m probably going to go to a pseudo element approach. And now the question becomes, where do we want to put the pseudo element? Now the pseudo element actually gives us the ability to perfectly map the overlap on the image, potentially.
0:42:19
We can put the pseudo element on the feature card or we could attach it to the media wrapper. Hmm, Bev wants a border radius. Okay, yeah, yes you could do, Marcus says you could do a negative margin on this media, but I’m not, I would like to avoid that if possible Now the Yeah, that there’s gonna be a lot of spacing stuff to deal with if we go if we go a negative margin
0:42:59
I’m curious to see what it’s like if we attach this to let’s first let’s get rid of the gradient So we’re gonna say you’re gone. Okay, and which means that we’re gonna take our little BG stop away. That’s not going to be a thing anymore. Media width is still a thing, inner content width is still a thing. Now, let’s try attaching it to,
0:43:27
I’m going to go feature section, Atlanta, feature card, I want to go layout position relative on this. This is going to be the thing that contains our pseudo element, and we’re going to just put it straight off of here. Okay and let’s go content is blank. Let’s go width is just get it on the page
0:43:51
essentially. Background background color is red. This is where you can start to see the delay a little bit and this is Bricks is working very hard on the, on various, like, it’s hard to reproduce in some situations, but there’s lag issues in various places. And they’re not all related. There’s a CSS typing lag.
0:44:15
So there’s a slight delay when you’re typing in the CSS box. There’s a huge lag related to duplicating elements. I think they already solved the renaming elements lag. There was a, with renaming elements, there was a lag. There’s a lot of little different lag points. I know they’re working very hard on resolving that,
0:44:34
but you’re seeing it now as I type. So let me go to the media wrapper. All right, let’s go with position absolute here, okay? Let’s go with, how do we want to do this? We’re going to need to, let’s go top zero, left zero, okay?
0:44:58
So that actually works really well. But I actually want the top to be, this is going to be interesting.
0:45:03
Let’s go top minus 50%.
0:45:06
Let’s see if my brain can compute this real quick. Let’s go to translate 50% 0. How about 0 50%? Come on, type, type!
0:45:27
Minus? No.
0:45:29
Plus? Okay, hold on. Trying to get it centered on the image. Top, left, how about bottom?
0:45:44
Oh, it doesn’t need to be in all caps, that’s for sure.
0:45:47
Doesn’t need to be capitalized. Trying to type under this mic is proving to be interesting. All right, translate, 0%, 50%, 25%. 0% 50% 25% Should be 50. I don’t know why it’s why it’s not doing that. I’m trying to think back from the bottom
0:46:07
Okay, I don’t know Let’s go with we were using neutral ultra light Let’s do that again neutral I’m about to get rid of this mic and use the other one if I can’t quit doing the typos all right, we want to go z index of minus 1 and
0:46:32
which means we’re gonna have to go immediately to feature section Atlanta before we forget and we’re gonna have to do an isolation of Isolate otherwise you will lose your pseudo element if feature section Atlanta has a background image because that negative one Z index will put it behind the background color or image or whatever is happening on the background
0:47:00
of feature section Atlanta, it’ll put it behind that unless you change the stacking context of this card. Now what we’re gonna do is overflow hidden and it’s essentially gonna cut that pseudo elements extra position off. And now we’re here and we’ve arrived.
0:47:18
All right, we’ve arrived. So now what we’re gonna do is we’re gonna see that we can add the border radius to this now, right? So our border radius is just radius. And now we have support for border radius. We have the exact same effect that we were getting before,
0:47:35
but the overlap is always going to be Effectively the same I’m pretty sure so if we duplicate all this content right here And again, we’re gonna have to wait on the bricks lag this overlap is always going to be exact It’s not it’s the overlap the amount of overlap is never going to change now because we’ve essentially attached that that background To the image wherever the image goes that’s where the background starts, and it’s going to go It’s going to go all the way up from there.
0:48:02
That is one advantage of the pseudo element. You have the advantage of the border radius, you have the advantage of choosing what it’s attached to, essentially, so that it can grow proportionately. It still supports a gradient background. It actually still supports an image background.
0:48:18
You can put an image in the pseudo element, right? So if you wanted to, instead of just a color, it would support a full image here. Like I could do this, you know, whatever you wanna do, like that pseudo element gives you a lot of control.
0:48:32
Let me get that out of there. Okay, so, actually I did that on the feature. You would not be able to do it there. You would have to do it in the CSS right here. But instead of background color, I could do background and use an image.
0:48:45
You could use a pattern. So, you know, you’re not limited in any form or fashion of what you can actually put in that pseudo element, which is great. You can have the, you can have each one have a different color
0:48:56
if you wanted to. So there’s a lot of flexibility here, very easily. What I don’t, what I know people are not gonna be able to do is find that pseudo element though. Like it’s not obvious that that’s there. So what do we want to
0:49:17
do? One, we want to we want to give them the option of positioning it, okay? And we were using essentially a translate to do that. Mm-hmm. Let’s go to actually, you know what, let’s let’s try something easier. You could even do something static like this, 300 pixels. And you could just give them this value.
0:49:40
We don’t even need to translate at that point.
0:49:42
Let’s just give them the value up from the bottom. So if they did 200, it’d be that, 100, it’d be that, whatever, I think this is okay that this would be static. And they just, because it’s good, it doesn’t, the content height doesn’t matter. It’s just going to continue to have this offset
0:50:06
over and over and over again. So let’s just do media. We’ll call this media offset, media offset like that. Okay. And then what we’ll do is we’ll go over here and add that right here.
0:50:18
So we have a media width and we have a media offset. I think that makes, you know, a lot of sense, pretty easy. So two things they can manipulate about the media.
0:50:28
I like that.
0:50:29
I think we’re good with that. Okay, so now what we have to do is come here and again, let’s go, our offset probably at that point, I don’t know, should we keep the offset the entire time now? I guess that’s a decision the person can make.
0:50:47
If they want to make that decision, they can make that decision. Here’s where it becomes a problem, right? Here’s where it becomes a problem. We can use a… Hmm, hmm, okay. Let’s go 200 pixels.
0:51:16
The offset would be… How would this work out? I’m thinking of the two values we could use. Maybe a VH value.
0:51:34
No. I’m trying to get it to where it’s like it’ll it’ll give them the offset
0:51:39
but then when that value doesn’t work but of course my dyslexic brain I’m like I don’t even know this should be a small number or a big number. Yeah okay I’d have to come back and play with that. But essentially what we can do is use a min function, which is going to set a minimum, or it could be a max function, set a maximum. When I get more time to think about it, I’ll figure it out.
0:52:10
But it’ll essentially not break. They could just still set this one value, and then it just won’t break. We just got to figure out what that value needs to be. Thinking about it right now, it’s not something I want to do.
0:52:24
All right, let’s get rid of this extra content. Anything else on this frame you see that we need to consider or think about? This is again, this is the point where I would put it away and come back to it a few days later. Fresh brain and just go after it again. Is it me or is the pic sitting left of center compared to the gray?
0:52:42
It’s not. This is the exact, what you’re seeing is that this, it depends on the length of your words right here. So this is a feature that is longer. Okay, we need to address this situation right here. If they accidentally or, it’s not really designed
0:53:00
to have multi, I wouldn’t recommend multi-line, but we could definitely account for that. Okay, let’s go to list, list item. And, da, da, da, da, da, let’s go start What we’re going to want to do is fix the line height on this as well So let’s go typography. Let’s go line height height height height
0:53:24
one point one ish 1.2 ish Okay, pretty good. But see now when that gets over here. It’s not going to look as offset It’s it’s going to depend on the length of the feature text. And now that I’ve done the line height difference there, we can probably adjust our content gap,
0:53:45
maybe like 1.5, something like that. You can really just dial this in, whatever you want. I’m just giving them a decent starting point, and then it’s obviously up to the user to do the thing that they want to do with their spacing and all of that.
0:53:57
But I think that’s pretty good. But what you’re seeing is I can’t can I draw here This and this makes this width look different than this width But it is perfectly centered this distance exactly matches this distance right here Okay Do a minus number as a second number in a min, so it’ll just become a card then. Yeah, I’m gonna play around with it
0:54:29
and then I’ll, if you’re a frames user, obviously you’ll see what the end result solution is. But the other thing too is when we make that go to the bottom 100%, if that’s what we wanna do, and see, not everybody’s gonna wanna do that. Some users are gonna wanna keep the overlap the entire time.
0:54:45
Other users are gonna be like, I don’t want the overlap at those small device sizes, I just want it to look like a card at that point. Then you’re going to have to add the bottom padding in so that your image is not touching the bottom of the card. But again, these are, I don’t, you know, one thing that we had to just come to terms with,
0:55:04
you know, when building frames is that we’re not going to be able to make the frame work to perfection in every single use case scenario that could possibly exist. And this is where the philosophy of frames is, like, we’re giving you the starting point, we’re doing most of the work for you, and then you’ve gotta kinda take over. You’ve gotta, you know, if you wanna do something
0:55:23
different with the frame, or customize it in some way, that’s the 20% of work that you have to do, right? We’ll do 80% of the work, you do 20% of the work. We’re not gonna do 100% of the work to where you just add it and it’s like, oh, I can move on with my life, everything’s done for me.
0:55:37
Most of it is done, and then you make whatever little tweaks and adjustments you want to make, and the end result is that you’ve saved 80% of the time that you would have taken on the thing. Like, how long have we been here, thinking about different scenarios and tweaking things?
0:55:51
This is all time you would have been spending if you would try to build this from scratch for yourself. So if that’s all the time that you’ve saved, now you start from here, you make a couple little tweaks, and you’re good to go. All right that’s the philosophy right? So now we’re good, we’ve got our
0:56:10
we’ve got our situation the way that we want it. I think I’m gonna pause on this, come back to it a couple days, publish it, finish it up. To show you what we would do essentially to publish it now, let me get our sidebar back open and then we’re going to do our Lapa.ninja segment, okay? Let’s get rid of this.
0:56:28
So what I would do is screenshot this like this, get the full thing in here. I would hop over to Figma, and it’s gonna load our, I already have it up because it’s what I was already doing. We’ll just delete this thumbnail.
0:56:44
You can see all these like little guides that we’ve got in here. So now what I would do is drag this in and I would position it. Okay, and I’m going to position it like this, something like this. I’ll just bump it up here, zoom out a little bit. Okay, let’s grab that right there and right there.
0:57:12
This is essentially the content width of our frames right here. You can’t even know what I’m talking about. There’s lines, there’s shades, there’s like, I’m aligning it with these, what are they called? These layers in the backgrounds. Okay, so I’ve got that essentially done.
0:57:28
Let’s get this a little bit more vertically centered, probably like that, okay. And then I would just export, bang. And I would say feature section Atlanta, Atlanta. Okay, great. And then we’re going to come in to, let’s go back to Arc. I still look for Chrome. My brain still looks for the Chrome icon. Still getting used to Arc. All right, let’s go into here. Let’s
0:57:56
go out of here. And let’s go set featured image. And we’re going to go into frames thumbnails we’re going to go into features and then we are going to drag that in so feature section Atlanta and then this is how that thumbnail shows up in the gallery like when you’re searching and I say that this is a section frame it belongs in the features bundle okay save drafts I’m not going to publish it quite yet it’s not fully done but then what I would do is go to frames.io and log in here now we have to put it essentially in the library right like our library
0:58:34
not the bricks library so we’re going to go to frames which is CPT add new frame this is feature section Atlanta this is for bricks builder I would give it a lead, which is just an intro. Okay, this is the intro, right? Then I can do a whole main introduction, like there’s a long form introduction here. I can say that this is a query loop compatible frame.
0:59:02
I don’t, we don’t put all the variables in there anymore because those get updated and changed. This is too much to document all that stuff. I do document more with comments inside the frame now because, you know, we’re not documenting it here which you know is better for users typically anyway. We had a lot of stuff
0:59:22
that we’ve kind of deprecated. Features and section and featured image. So we’re gonna go into, oh it’s already in features, that’s that’s nice. Feature section Atlanta and then this one I will give it alt text. So this is feature, feature section Atlanta. I’m just going to race through this, set featured image.
0:59:46
We will go to save draft. Essentially, all we need to do to add it to our library and then we would add it to the change log. Add it to the change log, we would go to all change log entries, and we would go to add new.
1:00:04
For just normal frames one, there’s no versions or anything like that. So we just don’t add a title, which is just going to add, I believe the date or something like that by default. Then we’re going to say frames and feature section Atlanta,
1:00:18
and then I can hit publish. Now, I’m not going to do that because then I’d be done, the changelog would be updated. So I’m not going to do that because we’re obviously not publishing it, I’m not putting it in the changelog yet
1:00:28
But just wanted to show the process because some people have asked about that and this is the way we use CPT’s and custom fields This is how easy CPT’s and custom fields makes things for so like I don’t ever have to go into bricks I don’t ever have to go into the builder any like front-end stuff I just go in the admin add a new frame fill out the fields hit publish Go to the changelog add a new changelog entry, select the frame, hit publish, move on with my life. It’s pretty simple, it’s pretty streamlined.
1:00:56
So front end work makes all of the rest of the work easier. That’s the whole point of doing it all like this. All right, that is that. Let’s go to Lapa.Ninja. Let’s do our Lapa.Ninja segment. Let me answer some questions first before we go there, but we’re going to dive into
1:01:10
Lapa.Ninja next. Okay, Ground Pet says, how many screens do you use normally? Just two. What inspired you to make this frame? I kind of explained it in the beginning. I like the feature, I like the layout of it.
1:01:21
I like that it gives you a way to talk about a feature, but then bullet point out like benefits of that feature. That’s what those check marks would be for. Or features of the feature, if you want to, but probably benefits of the feature more than anything. And it was not tab based, it was not too overly fancy, it was just clean, gives you the option to put media with it as well.
1:01:47
But at the same time it’s not fully boxed, it’s got that overlap going on so it kind of breaks up the boxiness of stuff. So there’s a lot to like about it. It was nice and clean, figured let’s let’s put it in. What stock image sites do you recommend? So I use, what do I use? I use Envato’s library a lot of times. I use Unsplash Plus or whatever.
1:02:10
Yeah, you know, nothing crazy. Adobe stock, I do kind of like. Those are probably the three main ones that I would bounce between. Okay, can you talk about the multi-language websites? I don’t make a lot of multi-language websites,
1:02:23
so I don’t ever typically talk about it. Why use an icon element instead of SVG? Why we use an icon, SVG is dynamic. I don’t know if that’s a question. It’s not phrased like a question. Can you, I’m not understanding the question.
1:02:39
So it’s down there at the bottom of the screen, why we use an icon element instead of SVG. I use an SVG. Oh, oh, oh, I see what you’re saying. I see what you’re saying. Okay, why use an, okay, that’s a good question.
1:02:55
So I will go back to the builder. Let’s edit with bricks. I’ll show you exactly why. This was a discussion we had very early on in frames. So I could use an SVG here, because this is an SVG.
1:03:06
That’s all I did is SVG, right? Oh, the other thing I didn’t do, that’s another pain in the ass, that I wouldn’t have to do if Bricks didn’t have this bug, but Bricks can’t style icons like classes, so with classes, like,
1:03:19
these all have a class on it, right? Like, you saw that, but look, if I go in to change the fill of this icon, it only does it for this one, it doesn’t do it for all of them. So, there’s a workaround,
1:03:31
and we have to put in the workaround. So we’re gonna go to root, and we’re gonna go to icon size, and we’re gonna say 1em, and we’ll go to icon color and let’s just do primary right helps if you spell it right primary so I’ve got icon size
1:03:46
and icon color now what I have to do is for height and width and all of this yes so we’re gonna go icon size icon size and then we’re gonna go fill and this is actually using the stroke so we have to do another step which is icon stroke color okay icon stroke color let’s put that in but we’re also going to put in an icon fill color you should not have to do all this you should not have to do all this but you do if you’re using icons SVG icons in bricks style so I’ve got icon stroke
1:04:23
color is going to be primary and then now primary on the frame site is just black so you’re not going to see any real change here but fill color is going to be transparent but now this gives you the controls over all options essentially the size all of that and let’s do we were using what h h3 is that what we decided to use so if I use h3 on the icon size, it’s gonna make it the same size as the text there.
1:04:54
I can also do a little bit of an icon offset, because if you notice, because of the line height of the text, this isn’t perfect. So I can do icon offset, I’m just gonna guess of like.25 M, something like that.
1:05:07
And then what I’ll do is I’ll translate that icon. So I’m gonna go down to translate. See, I’m searching for a fucking input when I’m already right here, I can literally just do it. Let’s do icon translate, okay, zero percent. If I do like one M, yeah, that bumps it there.
1:05:26
So now I’m gonna do icon offset. See how it was, I don’t wanna hunt around for the builder inputs, I can just do it right here. People ask me that all the time. Is that going to kill anybody? They’re already right here doing other stuff to these locally scope variables. So they might as well. Now what I sometimes do is I do this because,
1:05:49
you know, it doesn’t really make sense that it’s, I mean, it’s right there. They could, they could change it, but a lot of people don’t know what translating stuff is. They don’t know and they don’t know what this other 0% they could break this. Like I don’t really want them touching this. Okay. So I put in this and yes that’s an extra step that’s not really needed but we’re thinking about the beginner users on
1:06:08
frames like just make it a little bit easier for them it seems dumb but it does make it a little bit easier for them because now all they have to do is touch these things right here and they don’t have to worry about this code down here and potentially breaking stuff and all of that okay so now you can see because of the offset that looks like it’s really almost perfectly centered. Might as well just do 0.1. I think that looks almost perfectly centered. Now depending on the
1:06:31
font that somebody chooses and then if they change the font size like this is gonna have to be adjusted right? This is only works for the font that we’re looking at right now because every font has different character heights and things like that. So all right anyway you guys get the point. So now what I have to do, unfortunately, let’s go to here, did this get, see this? This is like, this is the problem.
1:06:58
So now what we’re forced to do is delete all of our list items again, and then duplicate them back. And so now they have that updated icon fill color, icon stroke color, all that situation going on. Okay, so now we’re better.
1:07:16
And I don’t even know why I reopened the frame. Oh, to answer your question. Okay, so now that was actually answer the question. If I use an SVG, people who want to use icon libraries, it’s a huge hassle for them. They have to remove every icon
1:07:30
and then switch it to the icon element so that they can use an icon library. See, the way that we did it right here, yes, I’m using an SVG, but if they don’t want to use an SVG, all they have to do is switch to a library.
1:07:42
So they can go font awesome solid, and then go to check, and they can put in their own little icon here. Then again, now they’re going to go down and change the icon height, the icon fill, all that stuff using the locally scope variables.
1:07:54
But see how they can do that without having to delete an element and then add an element, and then that’s just a whole not a great situation for them right so for people that do want to use an icon library this makes it really easy for people that want to use an SVG this makes it easy I’m not going to save that because as you can see it needs to be refreshed
1:08:19
okay now we’re back but it’s just ease of use for people who want to use icon libraries so we decided that there’s more upside using the icon element than the SVG element and less downside It was just a way the pros and cons Okay, how do you come up with the names of the frames when when can we expect copy functionality on the frames site? Most people don’t want copy functionality on the frame site It’s it is the easiest thing to do to go right here and add from the library. So you know unless just everybody starts requesting that I
1:08:54
don’t see a reason necessarily to add it. What else did you ask? How do we come up with the names of the frames? As you saw in the beginning of the stream we make them up. UN alphabet, fruit, city names, I don’t know it doesn’t matter because it’s gonna change anyway for most people so it doesn’t really matter. Is BricsCAD gonna allow frames to import variables into the built-in variable manager
1:09:18
instead of using the custom CSS field, and would you if you could? I don’t see any reason to. That’s for global variables, the variables that we use in frames, like you saw with this kind of stuff,
1:09:29
these are local variables. So there’s no reason to put them in a global variable manager.
1:09:33
Still having trouble to get the button mix
1:09:35
into working the latest 3.0, would it be possible to take a quick look at what I could be doing wrong? Yeah, potentially. Let’s do that at the end maybe, if I could, because I’m going to have to pull up the framework
1:09:46
and look at the actual mix in. Can you center the, this is a feature bullet point section, need to come to the right, attach the center. Yeah, we were talking about that earlier. It’s not actually off-center. The container for the list is perfectly centered.
1:10:02
It depends on how much content is in your feature text. Can’t you calc half the image and add that to the bottom padding? The padding is not affecting the offset. That’s an absolutely positioned element. Padding’s not gonna have any effect on it.
1:10:19
How to deal with the border radius for the background color like in the example. Okay, yeah, we did that. Okay, okay, getting to the bottom of the questions. Is there, okay, downside of using marker pseudo classes on list items?
1:10:32
No, there’s no downside. Put comments in the CSS about the icon versus font size. Is there a sandbox for ACS? Yeah, D123, I will go back and add comments right before we publish this frame. What happens when you run out of alphabets? No, there’s plenty of stuff. We
1:10:52
do cars, we could do a lot of stuff. When is the ACSS swag available to buy? I need someone to create it, design it, and we’ll make it available. Any discount code for ACSS or frames you can toss us, we don’t do discounts. When doing frames for SureCard for e-commerce, we have a bunch of e-commerce frames. SureCard, not yet, but I’m sure they will start coming soon. We just got to look at our SureCart user base.
1:11:18
You know, what percentage of frames users use SureCart? When it gets to a certain amount, you’ll start seeing frames for SureCart. Okay, let’s go to our Lapa.ninja segment. Let me get out of our Q&A here, scroll to the bottom of the chat.
1:11:34
Okay, how are we doing on time? We’re good. We still got 40 minutes or so. Let’s go to Lapa.ninja. So we’re going to get inspiration, Lapa.ninja, and I just want to go through some stuff that’s been added recently to their site. This is just a gallery of what they feel are cool websites, right?
1:11:52
Lapa.ninja is a gallery featuring the best 6,266 website examples. There’s a lot here to look at. And this is just essentially a paginated… A lot of people say paginated. I don’t know what a page is. I know what a page is. I paginate things. Should we have that debate now? Is it paginate or is it paginate? I paginate things. Because it’s a page.
1:12:21
You’re paginating it. I don’t know. Don’t really know. But that’s what I’m going with. Anyone else getting more and more frustrated with Woo? I mean, been there, done that, my friend. I’ve been frustrated with Woo for like a decade. It’s always been terrible.
1:12:37
It’ll always be terrible in my estimation. Okay, let’s go into some of these. So let’s just bring this one up. And I don’t want to just look at the design. I want to look at trends. I want to look at copy,
1:12:52
messaging in general, see what’s good, what’s bad, right? And we’re just gonna rapid fire these. We’re not gonna do our normal deep dive. We’re just gonna rapid fire these. Design specialists, I hate this. I hate this right here.
1:13:05
This whole situation, I don’t like it. Quit poppin’, I’m trying to digest your content. Your content is the most important thing on the page. And you’re like, distraction, distraction. Look at this, this fucking thing’s having a seizure. Does anybody see this?
1:13:19
What is happening here? Design specialists, joy experts, crafting delightful experiences for tech companies. Okay, I don’t know exactly what they do yet. I know that they’re currently having a stroke or seizure or something else.
1:13:33
They’re gonna make other people have a seizure. That’s for sure. It’s when I hover over this word right here. Okay, stop it. All right, I don’t know. This video auto-played and it has no audio.
1:13:47
I don’t know what I’m looking at right now. None of this shit helps me understand what’s going on on this website. Why in the world would I want to make a video with no audio full frame? Don’t know.
1:13:59
Let’s keep moving. Okay, design ties everything together. From your initial strategy to the final product, we weave human first, design through brand, marketing, product experience, deliver joy and delight.
1:14:10
What brings you joy? Why does this feel like I should be able to click on it? What is happening though? Nothing’s happening. Okay, that’s a dead section.
1:14:21
They wanted me to do something there
1:14:23
That’s a dead section. They wanted me to do something there and nothing’s happening. Okay, work you could feel, see, hear, and maybe even taste. All right, we’ve got all of our work. View our work in nice little strips where you can’t really see much of anything. I don’t know who any of these companies are.
1:14:41
Okay, let’s keep going. Proof is in the portfolio. Here what clients have to say. Okay, this is the first section that’s actually clean and not distracting and does what it’s supposed to do. Oh they’ve hijacked my scroll. Oh gosh they’ve hijacked my scroll. I don’t like this scroll. The scroll jacking not a good thing. Okay great great. All right I’ve had enough. I would have already left this website by the way.
1:15:07
I just look at this it’s too. Why? Why? Why this? Why? Do you want people to interact with abstract shapes on your website? Was that the goal? Or did somebody just feel like this was cute? What is the goal of the site? I just ask, what is the goal?
1:15:24
Is the goal to interact with these meaningless objects right here? Why are we making this do this? Okay, all right, I’m done.
1:15:33
I’m done with that one.
1:15:34
No thanks.
1:15:35
All right, let’s move on If you see one you want me to click on because I’m not gonna click on all of them You know throw out the name of it right here Daylight computer a more caring computer. Let’s go to that one See the computer D invented meet DC one a new kind of computer. It looks like a fucking what is that? The Amazon fire tablet, that’s what that is.
1:16:04
Okay.
1:16:05
Oh, look, look, the seasons are changing as I scroll, but I’m not going anywhere. They’ve hijacked my scroll. Right off the bat, they’ve hijacked my scroll. This is the number one trend that I hope gets dragged into a trash can,
1:16:19
or just dragged behind a barn and shot in the face. Like, stop hijacking the user’s ability to scroll your website. It’s the dumbest trend that, I leave immediately. I just, I don’t want this to happen. I just leave immediately. Like, okay, you don’t want me to scroll around
1:16:38
where I want to go, so I’m leaving. We refuse to accept a future where our devices are exhausting, addictive, and distracting, like your website. My gosh. Introducing Daylight,
1:16:52
a healthier, more human-friendly computer. Great, okay. Oh, now we get to go sideways. Okay, fantastic. The world’s first full-speed paper-like display. So it’s an Amazon Fire tablet.
1:17:05
Smooth interactions are common experience for your health. Okay, reading, note-taking. Oh, I can do all these things on a fire tablet. All right, let’s keep going. Or no, what’s what’s it’s not fire. It’s not a fire. So what is it? What is the Kindle? It’s a Kindle. Right? Okay. Or what’s
1:17:25
that other one? What’s that really expensive? Notability or whatever? I don’t I don’t know. I don’t I forgot what it’s called. I bought one and then I was like, man, this thing doesn’t do all that much. Okay, it’s got apps, it’s got this, a computer you can use outside. You know, I see, I, we, we know that people are going to assume right off the bat that this is like a Kindle.
1:17:47
They should kind of call that out, like, not your mom’s Kindle or something like that, you know, like, immediately let us know before we have to invest a bunch of time reading all your features and I can’t even get there. Look at this whole presentation I gotta wade through. Just put me on a fucking webinar or something. Like, I can’t stand it.
1:18:08
I can’t stand it, I’m out, I’m out. For that reason, I’m out. All right, let’s go to Kilt. Kilt is the smartest way to heat and cool your home. Okay, very direct headline. I see a nice family, some faces.
1:18:24
They look like they’re in a nice temperature controlled environment. I guess that’s what they’re going for. Control every microclimate in your home with a heat pump that’s a generation ahead. Gives me more questions than answers. Better climate by design. Quilt is a single system made of four parts.
1:18:43
Together they deliver the world’s most intuitive, advanced, and efficient home climate solution. Fucking solution, the word solution. Shoot it in the face. Okay. At only seven, this is very small text. At only seven, seven, eight inch tall quilt indoor units are built to fit more
1:19:02
places, blend with your style and save your energy.
1:19:04
Okay.
1:19:04
Can I, uh, can I go through this here? Oh, I got to drag it. There’s no, no scroll on the mouse. Got to hold it and drag it. I’ve seen one of these before. Okay, all right.
1:19:20
Everything’s controlled by an app these days. What is that monstrosity? Okay, does that have to sit in my living room? Or does that go outside? I can’t tell if this is really outside or if, I don’t know.
1:19:32
Let’s keep investigating though.
1:19:33
This is interesting. Okay, control every room in your home from any room in your home. All right, that’s nice. I like that headline. I like that.
1:19:41
That’s a good headline. Room by room control means everyone can enjoy their perfect temperature. Make home life easy with Quilts occupancy detection technology which saves you money by not heating or cooling empty rooms. I like it.
1:19:52
I like it.
1:19:53
Okay, let’s see how it works. Notice that I’m actually able to use the site though. I’m not like wading through this, you know, scroll jacked presentation.
1:20:04
I don’t know about these things though. That looks a little, looks a little,
1:20:08
my mom right off the bat would be like, that’s not going on my wall.
1:20:12
So that’s an objection that they’re gonna have to overcome
1:20:14
at some point. Are intelligent room by room control means you’re not wasting energy, heating or cooling empty room. Okay, well, yeah, let’s see how it works. Set the perfect temperature in every room using either the dial or the app.
1:20:31
Okay, yeah, I get it, I get it. Automate, I wanna know technically how it works. Like how does it accomplish it? What is it? Rely on Quilt Intelligence to reduce electricity usage. Does it, there’s questions in my mind.
1:20:43
Like does this supplement my normal air conditioning system and heating system? Does this replace my air conditioning system Does this replace my air conditioning system and heating system? I just have lots of questions, right? And they haven’t really addressed any of these yet.
1:20:57
Save money with a system that can operate over 400% efficiency, producing four units of heating or cooling for every one unit of electricity. This must be a full replacement system, right? Okay, all right.
1:21:08
Installation.
1:21:08
But you see that I’m actually interested in it, right? They’ve done enough with the imagery, the copy, to get me interested. Like, okay, let me keep going. Let me see if I can find answers to my questions. I wasn’t immediately like, I’m out. Like, I don’t know what is going on here.
1:21:23
I’m not interested. They’ve made a bad experience. The overall design and UX and all of that is fairly good. And the concept of the product is intriguing to the point where I’m still on the website. I haven’t bounced.
1:21:45
I’m going page to page to page. I’m reading. I have some interest. Okay, like so far, this is a successful website. You’re not gonna get everybody, obviously, to buy on their first visit.
1:21:59
What you wanna do, especially with something like this, is build interest and you want to build intrigue and you want to capture the lead somehow. Like is there, see I can reserve. Here’s the calls to action they’ve given me. Let’s just review this,
1:22:15
because we’ve already decided, okay, we might be intrigued enough. Do I wanna reserve a unit right now? No, not a chance. I just learned about this thing five minutes ago. I’m not going to be like, honey, honey,
1:22:29
we got to replace our whole air conditioning and heating system with this new. No, that’s not going to be the thing. Okay, this is going to be a slow ramp. Okay, a slow takeoff. All right, so we’re going to have to have another way
1:22:42
to capture the lead so that we can nurture them more and get them to a decision point. If the only thing they’re going to let me do is place a reservation, that’s a failed strategy. So let’s just look around, is there anything else I can do? I can see how it works, I can see what the process is like, I can, one system lots of
1:23:01
benefit, okay. I can explore the tech specs, I can learn about the pricing. Let’s go to pricing by the way, what’s up with the pricing? Okay, okay, okay, I don’t see any pricing. Whole home, all right, here we go.
1:23:15
Okay. Okay. All right.
1:23:18
All right.
1:23:18
Partial home.
1:23:19
See, you could do this for like, like when I finished my basement, that would have probably been a good thing to consider for the basement down here. Because you can do partial home. You could do, oh my God,
1:23:32
and you can do one room. Okay. A lot of flexibility there, but still all I can do is reserve. All I can do is reserve. They’ve got to come up with another way to capture a lead
1:23:42
besides, because I’m not ready to reserve yet. So my only option is to leave. If I’ve, they’ve given me two options, reserve the unit or leave. They haven’t given me anything else to do. So I guess I’m going to leave.
1:23:57
That’s how that works. You’ve got to have a call to action that speaks to somebody that’s not ready to buy yet. Give them something else that they can chew on that allows you to collect their information and then nurture them because people are not going to buy that thing the first visit.
1:24:13
Okay they’re going to they’re going to look at that and consider it for a long time. A lot of people, most people. Got to be able to nurture them. Okay let’s move on let’s go to baseline design. I don’t want to do normal stuff that we normally do. Unbeatable rates for SMS marketing, don’t care. Okay, Save Day, your super smart knowledge hub, Circle, everybody’s seen the Circle website. Okay, okay, Vinga, the future of finance.
1:24:44
All right, let’s look at Vinga, the future of finance. All right. Alright. Immediately I can’t scroll. I can’t fucking immediately. I can’t. I’m trying to scroll right now. I am scrolling up and down. Look at the scroll bar. Look at the scroll bar on the right. Nothing’s happening. I have to scroll a certain amount of distance and then it
1:25:08
goes to this next thing. And then the next thing. And then… Okay. What is it saying? Get in on the future of finance. I’m already annoyed. Get in on the future of finance. Discover innovative blockchain technologies. Invest in crypto and effortlessly navigate the world of web 3.
1:25:22
Okay.
1:25:26
Alright, let’s go down. Buy, sell, swap. What a presentation for the most generic copy on earth. Buy, sell, swap. Like, go to any crypto exchange, you’re gonna see those three words, right?
1:25:41
Okay.
1:25:41
But they had to, let’s bring it in one word at a time as they scroll down the page. Okay, we’re a virtual, why is this changing?
1:25:49
I didn’t ask that to change.
1:25:51
I was reading the, okay, I’m just skipping that part. What is Vinga? Vinga is on a mission to take innovative blockchain technologies from the decentralized space and bridge them to traditional finance inside a powerful app, empowering people to effortlessly discover, invest and navigate the world of web3. Vinga was launched to tackle well-known industry roadblocks on onboarding the next 500 million users to crypto and become one of Europe’s leading
1:26:19
and go-to crypto apps. Written like you’re trying to submit a term college paper our roadmap we launched it don’t care don’t care it’s like all about me me me me me me me what does Venga do for me? Don’t know alright I’m out. Let’s keep going let’s go to Fruitful finances figured out for you
1:26:46
Fruitful.com finances look at these happy people. They look like they’ve got their finances all figured out. Okay, finances figured out for you. They don’t give us any other information, but we are a little bit intrigued, so we’re gonna keep going.
1:27:02
So let’s scroll down. Hey, I can actually scroll the page. Hard to do in 2024, you know? Work with a fruitful guide who understands you. Get organized, optimized, and track on, okay, I do fucking Pictionary now.
1:27:18
What is this?
1:27:19
What is this lady doing? She’s pushing plants. What is this supposed to represent? What word?
1:27:24
And on, I guess it’s not.
1:27:25
I guess it’s just a floating thing to accent the text that I’m reading. Oh, okay, it’s got a little cute animation. Again, do we want people to, we want people to interact with this thing or like read the actual content?
1:27:37
Track to hit your goals in no time, a partner and a platform that makes money simple. So you get a partner and you get an app. All right, got it. All right, take control of your finances with expert human help
1:27:49
and a single intuitive place to track it all. Guides that help you grow. Okay, all right, okay, membership benefits. Let’s see what our benefits are. I don’t know why that had to do all of that, but okay. Talk to a human, an expert, a fruitful guy.
1:28:05
Dedicated advice and support, one-to-one video sessions, ongoing progress. Well, hold on. Membership benefits, and then they started listing features. So we have a little bit of an issue with features versus benefits here.
1:28:18
Earn 5% on savings set up for your goals. Okay, all right. All right, invest a smarter way to start or scale your investing. Okay. All right. All right. Let’s just look at the price. Oh, here we go. Let’s look at the pricing. It is scroll jacked a little bit. It’s got some smooth scrolling stuff going on. So I
1:28:39
can’t actually go the speed I want to go, which is annoying. Okay. $98 a month, $92 a month. That’s, you know, quite expensive for somebody who, um, can I see I put this on do not disturb and it disturbs me all right oh dear oh we’ve closed it oh geez okay yeah I just don’t I just I don’t know I don’t all these technology companies are constantly like what what can we do differently well instead of an app let’s pair it with an expert let’s keep going. Let’s see if anybody shopping, let’s see,
1:29:19
anybody buy, sell, swap, bullshit, selling shit. As a finance manager, how do you define web three? Yeah, yeah, good question. I sometimes think he does this deliberately to rant
1:29:29
and I’m so grateful.
1:29:30
Well, it’s something we need to rant about because like the trends in web design right now are as annoying as they have ever been. Let’s look at Dovetail. How does your product team decide what to build next? Let your customer lead the way.
1:29:52
Dovetail makes sense of customer feedback so you can make better product decisions. See how it’s like plain language? It’s like, oh, okay, finally. It’s not like I’m reading, you know, chat GPT. It’s not like I’m reading a textbook it’s not like I’m reading corporate mumbo-jumbo bullshit it’s like just tell me like
1:30:09
okay you started off with a an interesting question how does your product team decide what to build next that’s a fairly good question and then it says let your customer lead the way and then it introduces dovetail we make sense of customer feedback so you can make better product decisions. So now I’m at least interested. So now we scroll down. Okay, it’s got some more motion bullshit going on. All right. Dovetail takes scattered customer feedback and gives you the
1:30:38
insights to build products people love. Get the answers. No guessing, no gut feel. It’s a whole new way to understand your customer. Okay, I’m interested. I’m just going to keep reading. Find answers to burning questions, burning customer questions. We bring all your customer data into one intelligent, searchable location. Unleash the power of collective customer knowledge. Connect the dots across teams and tools.
1:31:01
Find the full picture of your customer. What are the top user pain points? Can I actually do something here? No. It looks like an input, but you can’t do anything with it. Okay.
1:31:11
Summary of 32 results across eight projects. The music app disappoints users with confusing UI. Okay, all right, so this is all customer feedback, I guess, and this is the summary that you’re given, all right? I need more insight on how this works. Make sense of usability tests, and discovery conversations,
1:31:31
and industry reports, okay? All right, highlight themes. I’ve been scroll jacked again. You guys see the trend? The trend is like don’t let the user scroll where they want to go.
1:31:43
Force them to go through a presentation of sorts. Okay, to be able to see a user, okay, that’s all right. Take control of customer. See, I haven’t really got to what I need to know yet. And I’m running out of patience at this point. And this is what most users do.
1:31:57
They start to run out of patience. Like, can you not just tell them how it works? We proactively identify patterns in your feedback before they’re problems. So your team will always know what matters most. Okay, how, how, how is the feedback collected?
1:32:10
First of all, that’s why I need to know. How does the data get into the system? That’s like step number one. Okay, connect your team to the customer. Okay, all right. I don’t even know how to get the customer connected yet.
1:32:26
Powering decisions of the fortune 100. Don’t care. Not a fortune 100. Do I, okay. What is, okay. See, now I’m, now I’m running out of, now I’m running out of patience.
1:32:36
Let me go to the pricing. There’s a free version. There’s a $29 per user per month.
1:32:42
What’s a user?
1:32:43
Is this my team?
1:32:44
This must be my team. Okay. Uh, let’s go to product overview. That’s the same situation I saw on the, see it says transform your customer data, but like where does it,
1:32:58
how does the customer data get into the system? See this, to the people who built this product, that’s, they already know. It’s obvious to them because they built it. But to somebody that’s never used it before, that’s like the top question.
1:33:14
It’s like, how is the data get in to the system? I get it, I can take control of customer feedback, but how, how, how, how? Okay, so I’ve read through all that, didn’t get it. Channels, get on top of feedback, okay? Channels is a new way to transform feedback
1:33:32
into power, fucking, it’s another thing that I gotta figure out, okay? Product, channels, integration, connect your tools. Figure out. Okay, product, channels, integration, connect your tools. Okay, seamlessly import data,
1:33:47
share insights and build workflows. Where do I import from? Set up your insights hub in minutes. Get started by importing existing data from all of your files and folders. Not good.
1:33:58
I don’t have any customer data in Google Drive. How would Zoom interact with this? I just have more questions now. Discover insights across all your data. Interviews and recordings. Well, I haven’t done any of those.
1:34:12
Does this tool help me do it or do I have to do it with other tools and this place just collects it? See, I’m running out of patience. I’m running out of patience. This is not like, now you’re talking about APIs.
1:34:23
Okay, all right.
1:34:25
Like Help Scout maybe. Maybe Help Scout would be a thing not seeing help scout intercom okay I don’t use intercom Zendesk don’t use that all right I mean help scouts a pretty large thing and you would think it would be there okay I’ve lost patience I’ve lost patience Goodbye dovetail
1:34:49
You lost me. Okay Let’s go to let’s find let’s find a couple more we got time for a few more here what looks interesting Everyone checking their phones. Let’s see the the swag list keeps growing Okay Do the hot pink one. Okay. Hold on. Let me let me go back then. Let me go back. Somebody requested one. Let’s, let’s see. Hot pink, hot pink, hot pink, hot pink, hot pink. This one right here.
1:35:23
This one right here. Design that’s crazy good. Maybe you meant this one. Crazy creative. I didn’t want to do I wanted to stay away from agencies. Yeah. Yeah. Want to bring an idea to life. Yeah, I mean it’s not, it’s I mean it’s what you would expect, you know, agencies just classically do this kind of stuff. Looks like they’ve got some as a service type pricing.
1:36:02
This is not my style of design.
1:36:04
It’s not my, like I don’t, unicorns and headless bomb people. Not really my style. Like, okay. Let’s go to page two.
1:36:15
Lappa Ninja is not showing trends.
1:36:17
These are not trends. It’s BS display ground for graphic paint style designers that think that they are creating paintings. I mean you see these on, I’m just seeing them everywhere, not just Lapa.ninja, I mean so many websites I go to. I see all these trends, Tax Fix, this one looks you know traditional, let’s see what
1:36:46
they’ve got going on. Eva, I can’t even pronounce the fucking name to start out with. Eva gets one, what is this? What is this symbol? Back with tax fix. Instead of complicated tax terminology, tax fix uses easy to understand questions.
1:37:03
So you understand everything and there’s more in it for you. I’m already not interested. It started out with a terrible headline. It just, it didn’t, it went off the rails right at the beginning. The simplest way to earn interest on your crypto. Earn, invest, and send money with self-custody.
1:37:22
Okay.
1:37:22
Mm-hmm, mm-hmm, mm-hmm.
1:37:25
Okay, I don’t know.
1:37:26
Crypto stuff’s not very exciting to me.
1:37:28
Flow Fest, no, no, no. Switchboard, no. Catalog, one search bar for your business. Sounds interesting. AI answers for your business. Everything is AI.
1:37:47
Everything’s AI, everything’s scroll jacked. What was our revenue? Okay, so you basically just ask AI questions about your company data, right? Okay, great. Okay, okay, okay, okay. What else looks in a grape? Now that’s an agency, agency, agency, agency, agency, agency. Hmm. agencies right here. Lex write something great today. Okay, let’s do let’s do two more and
1:38:31
we’ll get out of here. Primary blazing fast brand. Okay, more agency stuff. I don’t want I already…
1:38:40
Jeez, ugliest sin, dude.
1:38:43
Ugliest sin. Here we, oh, that’s Ghost, okay. More agencies. Okay, let’s go to the next page.
1:38:48
Render your fastest path to production.
1:38:51
Build, deploy, and scale your apps with unparalleled ease from your first user to your billionth. Bowery, whatever food is needed, we can grow it. Is that one you’re requesting? Let me go back and see. Can we search? Well, ah, there it is.
1:39:33
Okay. This is the one you wanted? Let’s do it.
1:39:39
Let’s do it.
1:39:39
All right, already, already we’ve got, my God, I can’t even see the things that are happening in the background because of the pop-up that came in. Get the latest and tastiest. This is an immediate no.
1:39:53
Okay.
1:39:54
Now what’s going on? Bowery, eat up.
1:39:57
Eat up!
1:39:58
They’re not telling me anything else. Eat up! Deep inside our wonderful world of vertical farms, freshness runs free, bland gets banished, and smart produce secures the future of food. Should I hit discover how or should I try to scroll?
1:40:12
I’ll just try to scroll. Let’s see what happens if I hit discover now.
1:40:15
This is basically like, hey,
1:40:17
our homepage doesn’t matter all that much, we’ll just immediately take you to a different page. Why not just put that, if that’s so important, like, yeah, I mean, most people are gonna be like oh well okay what’s going on here let’s just scroll bite into good tastes way better waste way less fresher longer no bad stuff 100% traceable our produce
1:40:44
gets tracked from sweet little seed to sweet lucky shelf the purest most peak season flavor in every single bite wait I’m trying to figure it out, like, because they didn’t just tell me straight up what’s going on here in the hero section, so now I’m in a mode of like, all right, I gotta figure out what’s different
1:41:01
about this produce versus like, you know, Whole Foods or a grocery store, or like, what’s different?
1:41:08
Don’t know yet.
1:41:10
How we grow our greens with Bowery OS the proprietary technology that powers our farms every crop is the cream of the crop. This is the most annoying this happens all the time. This is a promise this headline is a promise they are going to tell me how they grow their greens so then I’m like yes please I would like to know so I read this and it doesn’t tell me a damn thing Nothing
1:41:44
Why this whole section right here? Take a screenshot Drag it straight into the trash Just it’s useless and I can’t even go anywhere. Oh It’s the intro to an animation an intro to a scroll jacked presentation. Okay, it has no down arrow, it has no indicator, it’s got a chintzy little, oh gosh, I can’t,
1:42:13
I can’t. These people are so self-absorbed in their own design bullshit that they completely forget about the customer, completely forget about the user of the website. Like, how cute can we make it, Bev? Pick them, pick them, pick them. Let’s go back to the hero, remember, eat up.
1:42:35
Okay, didn’t tell us anything.
1:42:37
Pick them.
1:42:38
Okay, still not, still not telling us anything. Good food starts with good seeds. We take pride in selecting uniquely flavorful cultivars that have their own recipe for ideal and optimized growing conditions within our farms to reach each plant’s intended and unusually pure flavor. Bullshit. Absolute marketing bullshit.
1:43:00
It means nothing, says nothing, tells me nothing. Stack them. Growth starts indoors in our protected indoor environment where Bowery OS combines AI, software, oh my god, it’s just… Tech people ruin everything. The tech industry ruins everything, I swear.
1:43:18
As our greens grow, Bowery OS keeps tabs on every crop so it gets everything it needs exactly where it needs it. From tender loving care to water and light. Do you sing it songs? Do you pet it at night? Do you, what else do you do to the plants
1:43:33
to just make them so much better than everybody else’s plants. Once the crops are at peak perfection, Bowery OS sends our modern farmers our favorite signal, it’s harvest time. Our greens are harvested at the exact right moment and shipped to local shelves in as little as 24 hours.
1:43:57
For that reason, I’m out. You guys see, you guys understand, it’s… I went on rants before about anything that has won a web design award probably should go immediately in the trash. This kind of stuff, this is rampant. It’s everywhere.
1:44:15
Everybody is so self-absorbed in, like, let’s just be the most unique and creative in how we’re positioning things and animating things and it’s never just like, how about this, how about we have a good product and we talk about it in plain language
1:44:37
and it’s got so many benefits that when people read the benefits and see the product in action, they’ll fucking buy it. Like if you have to go through all of this insanity in the UX and the UI, it just tells me your product is not all that great.
1:44:53
Like if your product was interesting you wouldn’t have to add all this flashy bullshit around it. Like just tell me like what it is, show it to me, clearly communicate the benefits, why it exists and what it does for me and I’ll probably buy it. Like get out of your own way. This is nonsense. Let’s do one more, TripSuite.
1:45:16
Okay, the most comprehensive software. Every, everything is the most comprehensive. The most this, the most that. The most comprehensive software for travel agencies. Okay, well, I’m not a travel agency, but let’s see. From CRM to commission tracking and accounting,
1:45:29
we provide a modern solution for your agency that your entire team actually enjoys using. Okay, let’s go down. At least I can scroll. We’re off to a good start. TripSuite brings together all of the features and integrations
1:45:43
you expect into a central workflow. Give me some examples. Okay. CRM, commission tracking, accounting, itineraries, analytics, workflow automation. Okay.
1:45:57
Agency managers, and I don’t know, this is boring, right? We’re not travel agents. Let’s go to something we can connect with. Last one, final website, here we go. I’m watching the chat too, if you wanna throw one in, if you wanna say which one, which one should it be?
1:46:14
Hmm, yes, it’s way too pretentious.
1:46:18
That’s a good word.
1:46:19
So easy to miss the accompanying text at the bottom once you’ve conditioned the user that they must keep scrolling for content, for sure. I’m clipping this part and sending it to our creative director, pure gold and truth. Okay.
1:46:30
Okay, let’s see. TBI, okay.
1:46:32
To be frank, companies like Apple don’t help
1:46:34
as they do it really well in lots of cases because they spend time to use it to enhance products. Other sites then try to do the same but often miss the point. Yeah, I agree. I mean, we do Apple right after this. In fact, that would probably be a good juxtaposition.
1:47:02
The thing with Apple is that people who use Apple products do care about like the pretentiousness of the design side of things, right? So you do have to know your audience. Okay, here’s a Habits app, the official Atomic Habits app. Tiny changes, remarkable results. Based on the easy yet proven habit change system
1:47:31
from the New York Times bestseller by James Clear, Adams is a habit app like no other. I’m very familiar with James Clear and his work. And I think his blog was around for, I think I was reading his blog like 10 years ago, it feels like.
1:47:47
But he’s got this app system. I really like the branding. The official Atomic Habits app. I like the headline, tiny changes, remarkable results, right? And then it tells you what it’s based on, okay?
1:48:01
Obviously you can download it in the app store, the Google Play store, it shows you a photo of it. Adams is the only app built on scientifically backed laws of habit change. We make it obvious, make it attractive, make it easy, make it satisfying, okay?
1:48:18
Fairly simple, direct copy so far. Why we’re different. Here we go, here’s a promise. We’re gonna tell you why we’re different. Let’s see if they follow through on the promise or if they give us a bunch of bullshit.
1:48:32
Okay, we know what really works. We built atoms on proven principles of habit change. Make it obvious, make it attractive, make it easy, make it satisfying. They’ve introduced a process-like concept of step one, step two, step three, step four.
1:48:46
These are the principles of the system, okay? And it’s easy to see how this would be maybe successful, at least enough to continue reading and to be intrigued, okay? Alright, so we know what really works. Alright, I’m going to scroll down. We meet you where you are.
1:49:03
We believe now. They’re doing a presentation style thing, but they haven’t hijacked my scroll, okay? So I’m still with them. I’m not annoyed yet, alright? Well, that’s nice to hear. That’s nice to know.
1:49:16
We believe building lasting habits means starting small and stretching just the right amount. We guide you through finding that balance, okay? That gives me the warm and fuzzies. Let’s keep going. We evolve as you evolve.
1:49:28
We help you adjust habits that aren’t sticking and level them up just the right amount as you make personal progress, okay? We’re in it for the long haul. We support you in creating accountability and learning the mindset’s essential
1:49:42
to lasting positive change, all right, okay? They gotta get more substance going here. We know what it takes to show up. We know everybody needs reminders and return to what matters most. We support you in building that system, okay?
1:49:55
Build good habits, break bad ones, and make better decisions in just five good minutes a day. Now they’ve given me context of how much, what is this gonna take? Like to use, to get value out of. They’ve set a bar at just five minutes.
1:50:09
Okay, that’s good. That’s a good bar to set. Get started today and cast a vote for future you. Okay, Adams is designed to help you take action. Notice they put a little call to action, but then they keep going.
1:50:21
Okay, identity-based habits, not just any habit. All right, start small and build habits. All right, they’ve hijacked my scroll. Not in a horribly annoying way, but a little bit of an annoying way. But I like the fact that the app is changing here,
1:50:40
showing me different screens to go with, you know, things I’m reading over here. It’s not bad, it’s not annoying, okay? This is a tasteful way to do it. And not overly pretentious way to do it. Okay, daily lessons, make your habits fun, and I can read, okay.
1:51:00
Aim to be great in 10 years start small, everything is perfect. Okay, duh, get started with the app based on here’s the book. Okay. All right, maybe, you know, if I haven’t bought the book yet, I haven’t read the book, maybe an option to buy the book would be a good thing here too.
1:51:18
Like, can’t click on the book, can’t, is this to actually get the book or the app? Atoms from Atomic Habits, yeah, this is the app. Okay, maybe an option to buy the book would be good. See what people are saying about, but again, I don’t know how they’re
1:51:33
sending traffic here either. Maybe this isn’t, you know, maybe this was a landing page sent to from the book. Maybe that’s the only way to get here, I don’t know. Love the flexible, okay, we’ll just keep going. We don’t have to read everything.
1:51:46
This is, you know, tastefully done, well-designed, clean, simple, good copy. This is an example of, we’ll end on a good note, right? End on a good note. This is a fairly good note to end on right here. Okay, all right.
1:52:00
Any questions?
1:52:01
We’ve got eight minutes. Let me go to the queue, because there’s already questions that have been asked, so I’ll just answer those real quick. And we’ll end on that. Because Marcel even said, any AMA questions today? Yeah, go for it.
1:52:19
You got eight minutes. Still having a little trouble with the button mix-ins in 3.0. Let me pull this up on my other screen real quick. I just want to look for that mix-in. Because I’m pretty sure I tested the button mix-in specifically before 3.0. Actually, before I did the live stream. I think I did it. Okay let’s get
1:52:53
out of this. You guys can’t really see what I’m doing but it’s not gonna take but a second. Defaults, include. Okay. Button, defaults, mixin, okay. Might not be the best to do on here.
1:53:19
I almost found it though.
1:53:20
Actually, it probably got moved to buttons. I will reconnect with you in the thread that you already started in the group, but I’m back from Florida, so I can actually double check. I have time to look at these things. So I will reply to you in the group for the button mix-in.
1:53:36
Kobe says, off topic, I noticed you have ACF and Metabox. Is there any difference? I did an article on why I switched from Metabox to ACF. If you go to gary.co slash blog, should be there. So we have right here. Why I left Metabox and went back to ACF,
1:54:05
Advanced Custom Fields. So, you know, it’s not, and it’s not too long of an article. It just goes over the key reasons, thinking, logic, et cetera, et cetera. Are you still planning on making more JavaScript videos?
1:54:16
Yes, absolutely, absolutely. Can frames new pop-up be set to show outside of the browser? Not yet. It’s on the list of things that we’re investigating, but not yet. No. Can you sort these websites with filters such as star ratings? Nobody rates them,
1:54:33
but there are different, I think they’re categorized, like maybe, you know, the sector that they’re in, things like that. There’s definitely some filters. Do you use HelpScout? Yes. In ACSS, why do the form styles only take pixel values and not allow the use of CSS variables or responsive font sizes such as on labels? They do. They do.
1:54:57
Anything that has a pixel value, let me go, actually we’ll go here. Let’s do this.
1:55:06
Let’s do this.
1:55:09
Okay. So let’s go to form. So you can go to like label, for example.
1:55:16
You’re talking about this. So this allows you to, well, we are changing this to allow for variables. So you can say like, you know, text in or whatever. You can still set a custom size, but this is effectively just your, you know, you set your min and your max label size, and it converts the pixels to rim and it builds a clamp function for you
1:55:41
so that it’s automatically responsive. Anything that has a PX next to it, it’s using a pixel value for reference, but it’s always converting it to rim automatically on the back end according to your root font size, right?
1:55:55
So if you go to typography, root font size is set right here. So it’s gonna convert any pixel values to rim based on this root font size for you, it handles all that for you on the backend. All you’re doing is using pixel value as a reference.
1:56:11
And that’s everywhere. Anywhere you see PX does not actually use a PX value.
1:56:15
Can we explore Wix Studio template designs next week?
1:56:19
Sure, any particular reason, Derek, that you wanna go through some Wix templates? I mean, we could do Squarespace templates. We could do, we could do all that stuff. But what is of most interest to you? Are you looking for like the layout, the design, like the UX?
1:56:38
You know, what is it that you’re looking to see? When will the ACSS 101 series resume? This week. I really wanted to record one while I was out of town. See, when I was out of town previously, I couldn’t record anything because I didn’t have any recording set up in Florida.
1:56:50
But now I have a full recording set up in Florida. I managed to get one video done and one live stream done. But we were at Disney, we were at Magic Kingdom for a full day. We were then we had an off day, which I did get work done on the off day, but not enough to do a video. And then the next day, we were at Epcot the entire day.
1:57:10
And the next day, we were at Animal Kingdom the entire day. And then we had friends over and like it was just it was a whole situation. There was not a lot of time to go around. But that’s not normal. We don’t normally, you know, when we go down to Florida, we don’t normally go like three days to Disney and all that. So anyway, that’s That’s the excuse, okay? But ACSS 101 resumes this week.
1:57:40
Will you ever have tutorials on how to build a custom bricks element? Maybe, maybe. Is there a custom element that you are thinking about building? I also don’t do that stuff.
1:57:51
So like my team handles that. Like the frames team handles creating those frames elements that you see when you install frames like the slider the accordion all of that kind of stuff so it just depends on what you’re looking for have you taken a look at breakdance v2 yeah not like firsthand like I didn’t install it but I watched the video release I think that the
1:58:17
migration tool is pretty interesting so you know I could see I could see a lot of value in that for sure. The whole preset system I mean Divi’s had a preset system that effectively does the same thing unless I’m missing something. And then I you know go once again we can just go to the blog once again and we can look for the word presets and here you go right here. Everybody should read this article. Mandatory reading.
1:58:51
Presets are weak, limited, and unnecessary, and they’re not classes. Presets are not classes, and they have dramatic limitations over classes. They’re like dumbed down classes. But this is a very detailed article
1:59:08
on why presets are not classes. Very, very detailed. And Breakdance is not the only, you know, builder trying to use presets. You have Divi, like I mentioned. Previously you had Generate. So Generate Blocks was a presets-based system. They’ve now moved, by the way, to a class-based system. Why? Read this article and you’ll probably understand why.
1:59:34
Because presets are not good. They’re just, they’re not good. They give you 80% of what you need, and then the missing 20% is awful, awful. And then you just realize, like, oh, they actually don’t do what I really, really, really need them to do.
1:59:52
So, and it’s all based on the notion that people who use page builders are too dumb to understand how classes work. That’s like the whole underlying premise is like, users are morons, we have to make it super easy for them, so instead of giving them a class system,
2:00:10
we’ll give them a modified preset system. And I just don’t buy into that. I don’t think users are dumb. I think users are, I think users have to learn concepts, but I think they’re fully capable of learning concepts.
2:00:25
It’s why I made page building 101. It’s why I don’t dumb down the tools that I build. Because my premise is that users are not morons. And my other premise is that users want to learn. The actual beginners who are like raising their hands saying, yes, I would like to be a web designer.
2:00:45
I would like to learn web design. Okay, immediately I’m just going to say, all right, well I’m not going to teach you the idiot version of it. I’m going to teach you the real version of it. And then most of them, 99% of them say, thank you. Thank you for not treating me like a moron.
2:01:00
And I don’t know why page builders continue to do this. If I built a page builder, it would not start with the premise that all of my users are morons. And that’s, by the way, what the Gutenberg system feels. Users are idiots. Or, their argument will be, users just don’t wanna know. They just don’t wanna know these things.
2:01:22
They just don’t wanna care. They just wanna be able to whip some stuff together. And it’s like, okay, well, like, but shouldn’t they just go to Wix and Squarespace? There are platforms for those kinds of people. Like my mom, I like to use my mom as an example
2:01:38
because she’s technically illiterate. So, if she wanted to build a website for her little bunco club or whatever she does, right? I would say, mom, go create an account on Wix and have at it. And I get a thousand emails about,
2:01:54
well, how do I do this? And how do I, and you know, cause it doesn’t matter how much, this is the fundamental understanding that nobody seems to understand in page builder land, page builder development,
2:02:08
or just development, web design in general. No matter how much you dumb it down, a technically beginner person still can’t use it. That you can’t make it easy enough for them to pick it up and do it without a learning curve. It is not possible.
2:02:27
The industry is too technical. There are too many things and principles you need to know out of the gate. It doesn’t matter how dumb you make it. Like, oh, don’t call it divs, call it a group. Okay, they still don’t know what to do with it.
2:02:43
Oh, don’t use flex box terms, just use little icons. Well, they can position, doesn’t matter. They’re still not gonna know. They’re still not, put my mom in front of any of these tools it’ll be a fucking month before anything gets done, okay? And she’ll quit eight times in that span.
2:03:04
So why are we trying? And why are we trying with a professional environment? Like that professionals use, we have to use this environment, stop dumbing it down. You will never accomplish the goal of making it workable for idiots. This is not going to happen.
2:03:21
And I’m not saying that they’re idiots, it’s like, if they don’t care to learn, then okay, it’s not for them. It’s okay, it’s okay to say that. It’s okay to be like, it’s not for you. It’s not for you. Because you know, there are tools that are for them.
2:03:37
And again, they still have to learn. Like, I know the Wix commercial is anybody can do it. But if you really, they never put an actual anybody in the chair. Turn a camera on, put somebody off the street, grab a random person off the street,
2:03:52
put them in front of Wix, turn the camera on and watch them.
2:03:56
They’re not gonna know what to do.
2:03:58
They’re not gonna do anything. Now what they can do is load up a theme, load up a template, change a little content probably. But they’re not gonna design anything. They’re not gonna actually build a page. And we don’t expect, I don’t think,
2:04:11
like a professional web designer to also want to use Wix. Like probably not. If you know what you’re doing, you’re like, no, that’s not the platform for me. So we have a clear distinction between the two. And if people wanna position this as,
2:04:25
no, no, no, that’s not the goal. The goal is, yeah, you load in a whole website. Like you just pick one that you like and we just make it easy to change content. If that’s the sales pitch, fine, fine. Okay, but again, that’s not a tool for me.
2:04:41
That’s not a tool I’m gonna be building sites on. See, there’s a clear distinction. You can’t make both of these people happy. You can’t build a platform that’s like, anybody can walk in and use it on day one to just change content around,
2:04:53
and professionals use it to actually build websites. Man, the chasm between those two groups is ginormous. It’s ginormous. And you’re gonna piss off one of them, so if you completely dumb it down, you’re gonna piss off the higher-end people,
2:05:10
and if you make it workable for the higher-end people, you’re gonna get the beginners lost. Unless you create a hybrid interface that allows people to control the level of complexity, and that’s going to take a lot of additional workflow and a lot of additional thinking and problem solving,
2:05:25
and nobody’s done that yet. Nobody’s done that yet. But the block editor concept again, and then you know that I hate the concept of, well, a professional will build it and then we’ll just let Bev tweak it to death.
2:05:40
Like that, that’s the block editor concept. That’s the worst concept of all. Like I am fully on board with like, there are, Kevin, there are people that want to build bunco websites and they don’t want to pay you to do it.
2:05:50
I’m on board with that. Let them pick a theme on Wix, let them swap the content out, let them hit publish and move on with their life, perfect. And that’s a great use of Wix. I don’t think WordPress should be going in that direction. Like at least not WordPress.org.
2:06:06
Now if WordPress.com wants to go in that direction and this is when I was on Jamie Marsland’s channel we had this whole debate and I said hey there can be two WordPresses, there can be a WordPress for everybody and then there could be WordPress.org. WordPress.org has always been the more technical WordPress. I mean you had to install it manually in the old days. You had to do a lot of technical setup to get it going. Now I know it’s one click install now, right?
2:06:32
But seriously, like am I going to tell my mom, well here’s what you want to do mom, you want to go secure your hosting account with somebody. With who honey? Well, you know, you’re going to have to make some decisions on that mom. But you know, once you get your account set up, there’s going to be this one click install thing for WordPress.
2:06:50
You’re like, well what’s that?
2:06:51
What’s WordPress?
2:06:52
What’s this?
2:06:52
And see, it’s already too much. See, I could just tell her, mom, go sign up with Wix. And she goes and signs up with Wix and then she’s in. No hosting to worry about, no setup, no plugins, no themes. WordPress has no onboarding. What is my mom gonna do?
2:07:08
There’s no onboarding of any kind in WordPress. You open WordPress, you have a dashboard from 2005, okay, that it appears to be. There’s plugins, there’s themes, there’s child themes, there’s this, there’s that. There’s pre-installed plugins, there’s that don’t actually do anything.
2:07:25
And then you don’t even know what, I open a block editor and I’m like, but then there’s this FSC, oh my God, it’s a nightmare. It’s an absolute nightmare. None of this has been thought through. None of this is user-friendly.
2:07:36
Again, turn on camera, put somebody that’s actually new. They’ve never done this. I don’t think. I don’t even have to do it. I can just imagine it. I can just imagine what will happen. I’ve watched people try to build websites who have 365 days of experience and I’ve watched them be totally lost. So the idea that there’s going to randomly choose someone off the street is for anyone. Anyone can use it and put them down, they’re not gonna know a damn thing, okay?
2:08:06
And wordpress.org is not a friendly environment. Put Gutenberg aside, start with just WordPress itself, not super user-friendly, not beginner-friendly, right? There’s a lot to know, what are pages, what are posts, what’s this area over here, what do the plugins do, what plugins should I use?
2:08:26
Oh, there’s 80 plugins that do the same thing. Which one’s the best? Oh my God, all it is, is questions and hurdles and challenges and things to consider and things to weigh. Nobody wants to do that that’s an actual beginner. So why are we taking that environment, WordPress,
2:08:41
which we love WordPress because it’s open source, because it’s flexible, infinitely, it scales because of all this great stuff, but that’s not beginner friendly. Why are we taking that environment and then be going, but the editor that’s inside of it? Well, that, that is going to be usable by anybody.
2:08:57
I mean, yeah, they can’t understand the rest of the CMS, but that little part of it, that’ll be super user-friendly. This doesn’t make any sense. We’ve got to start at the beginning and like, who is this for? What is it supposed to do? And the minute you tell me well Kevin I mean it’s obvious for
2:09:17
everybody. Ok well that’s a failed strategy so let’s just pause there and let’s let’s talk through that because no other software product in fact everybody in Silicon Valley pretty much knows that
2:09:31
if you say my product is for everybody every investor runs for the fucking hills. Nobody wants to be involved in a product that’s for everyone. You have to have a focus. You have to have a person, an avatar, an ideal user, okay?
2:09:46
So right off the bat with the mission, we’ve gone off the rails. This is the problem with the whole thing. And so this is why everybody’s like, why is there such a disconnect? Why do so many people hate the block editor?
2:09:58
Why are so many people confused with WordPress? Why is WordPress losing market share? This is not a mystery. These questions are easily answerable. It is a leadership problem, because it always has to go back to the leadership.
2:10:12
It’s not a personal attack. It’s just, it’s obviously a leadership problem. It’s a narrative problem. It’s a UX problem. It’s an onboarding problem. It’s an education problem.
2:10:24
It’s a workflow problem, it’s a user focused problem, it’s so many problems, right? But these are not like, it’s not like hmm what could it be? Anybody that’s been in software development or product development or marketing of any kind should already know the answers. We can clearly see what the problems are. And it’s not being fixed, that’s the other problem, right? We’re just forging ahead with this, it’s for everybody.
2:10:50
Okay, we don’t need to harp on it. I think everybody gets it. But again, you hear people complaining, you hear people wondering, you hear people asking, the answers are easy to come by. And for some reason, we’re not really
2:11:06
having these conversations. What we’re having is, and I try to have these conversations, but the answer is always, well, do you contribute? Like, no, I don’t contribute to the dumpster fire. I’m sorry. I will contribute if we can get a workable vision,
2:11:23
I would more than be happy to contribute. I will pay for my team to help contribute. But no, like, if you approach a dumpster that’s on fire, right, and if there’s five people around the dumpster and they’re just leaving buckets of water on it. They’re like, can you help please? I’d be like, yes, let’s put that fire out.
2:11:42
Right. But what I see are more people with fucking matches, like throwing more matches in. And they’re like, do you want to help with this? And I’m like, no, no, I don’t actually want to help with that. Does anybody happen to have a bucket of water available? I will help with that. So that’s the problem that we face. So, no, I don’t want to contribute to what’s currently happening.
2:12:01
And then the other thing they’ll say is, we just don’t use it. There’s not, so I’m like, okay, but you said it’s for everybody, but now you’re being like, but it’s not, if you don’t feel like it’s for you, just don’t use it.
2:12:12
But you told me it was for everybody. So that’s like a disconnect. That’s a big disconnect, right? This is where we are at. And I will say this, okay? Yeah, WordPress has what 40% of like 40% of websites are built with WordPress or something like that.
2:12:30
That number is going to start declining. In fact, I think if you looked at the amount of the percentage of new websites being created with WordPress, it probably wouldn’t be 40. Okay, that’s there. They are losing market share. They are losing market share. And we don’t want that to happen.
2:12:46
Okay, I am critical in this regard because I love WordPress. Matt just posted, it’s the 21st birthday of WordPress. How long have you been using WordPress? 19 years, Matt, and I would love it to continue. I would love for WordPress to continue to dominate, but the way it’s going,
2:13:08
it can’t possibly continue to dominate. There’s too many disconnections. There’s too much, too many issues, too many hurdles, too many things and it’s going in the wrong direction. I would like to see it strengthen. I would like to see it better.
2:13:23
I would like to see it dominate, okay? Any product that I really believe in and that I’m behind, I want to see it dominate, okay? So the only way we can get it to dominate is if we stop coddling it and if we stop dancing around the bush and sugarcoating everything and just say it like it is. Just lay out the problems. Here’s the problems and it starts with the vision. Okay, if you don’t know where you’re going, how can you possibly arrive at a meaningful place? It starts with the fact that there’s no vision. We’ve chosen a vision that’s impossible to achieve,
2:13:59
the for everyone thing. So I think it’s got to start there. It has to start there. Let’s get back to who is this product for and how do we want them to use it? And if we can define that, then everything else will really start to fall into place.
2:14:16
But I really think this, it’s gotta be for everybody. Everybody’s gotta be, it’s gone off the rails at that point. And then we get back to also, what is WordPress, guys? Let me just ask you a question. What is WordPress? I was under the impression for the last 19 years that WordPress is a CMS but for the last seven years
2:14:38
WordPress is a pseudo page builder content editing environment the entire focus of WordPress for the last seven years is some sort of like new vision of how content on the internet gets edited and laid out and we’re calling it blocks and we’re and that’s the whole last seven years and so you ask me is this product going to continue to dominate the market and I asked the question well has it
2:15:09
abandoned its core vision and you say well yeah kind of yes yeah they haven’t really done much with the CMS side of things. They’ve kind of gone off in this new direction over here with this block editor. Okay, well, that’s a red flag. That’s a red, anytime you abandon the core product,
2:15:24
essentially, that’s a red flag, red flag. And we see it still doesn’t even do basic CMS stuff. And then we also see the disconnect in the UI itself. We’ve got half of the thing has a new UI and the other half has the old UI. I mean this thing is the wild wild west right now. 21 years into the game it is it is there’s stuff everywhere. It’s like walking into a
2:15:52
garage like a hoarder’s garage and it’s there it’s just you’re tripping over shit everywhere. And there’s a dead animal in the corner and it’s stinking up the place okay this is where we find ourselves in year 21 of WordPress and I again I go back to I want WordPress to dominate and continue to dominate I love WordPress the only thing I use the only platform I use I don’t even dabble okay in other platforms I don’t care about other platforms because WordPress has the number one thing going for it, which is I own my content, I own my site.
2:16:29
Okay, it’s open source, it’s great, nobody can shut it down. That’s the number one thing. Wix, Webflow, Squarespace, none of them have that. You have to say, yes, I agree to your terms and conditions, I will behave myself, I will be acceptable at all times, because I don’t want to wake up
2:16:47
and have you turn off my shit, okay? Because that can happen on any of those platforms at any time. Especially in the DEI era and the woke era, right? You could just say the wrong thing one day and now your web flow site, gone, right? That’s a huge possibility. Okay, that can’t happen on WordPress.
2:17:08
That is the number one, especially for any business that actually matters. You’ve got to own the place that you put your business. Your digital business. You’ve got to own the land you put your digital business on. None of the other platforms have that. It’s the best thing about WordPress.
2:17:24
I want it to win. Don’t try to claim I don’t want it to win. Don’t try to claim that I’m tearing it down. Don’t try to claim, no. No, no, no, this is somebody who loves WordPress who isn’t super keen on the direction
2:17:38
that it happens to be heading, and isn’t super impressed with the things that have happened in the last five to seven years, and is worried, tremendously worried, that market share is going to continue to dwindle, and that we’re gonna get big, big, big problems coming in.
2:17:54
I’m at a point, we have people leaving, top developers leaving the block editor project. Okay, these are tremendous red flags. I’m at a point where I don’t even know if the block editor is going to make it. People want to talk about,
2:18:10
well, Bricks could close up shop at any time, right? Elements could decide they want to go off and do their own thing. They’ll just leave the WordPress ecosystem and yeah, yeah, those are possibilities. You know what’s also a possibility?
2:18:22
The block editor could just fail as a project. It can acquire so much technical debt that nobody wants to work on it anymore. It doesn’t do what it initially was intended to do. And at some point they just decide to take it around the barn and shoot it in the face.
2:18:40
That could happen. There’s no guarantee. People are like, oh, it’s so close to core. It is core. That’s the safest thing to use. Nope, not really.
2:18:50
Not really. It’s not, I don’t think it’s any safer than bricks to use.
2:18:55
Right? That’s it.
2:18:57
That’s a fact. Okay, so we need to have a greater conversation about this. That’s what we need to do. We need to have a greater conversation about this. But I always get attacked like, oh, you don’t like WordPress. Oh, you’re talking shit.
2:19:09
Oh, you’re doing this and that. No, no, no, no, no. Like, you know, we’re not going to get this thing back on the rails if somebody doesn’t speak up and be like, ah, guys, what’s going on here? What are we doing right now?
2:19:20
What’s the focus here? Who are we building this for? Like, these are really important questions. And if everybody’s like, you’re not on the team, you’re, contribute, it’s gonna keep getting worse, not better, we need it to get better, okay?
2:19:35
So we gotta have these conversations. And we gotta be open to having these conversations. Okay, I gotta get out of here. I got work to do. I just got back from two weeks, two weeks out of town. There’s so much work to do.
2:19:47
There’s so much work to do. So I’ll be back next week. We’ll do another episode. Maybe we’ll do, maybe we’ll do some Wix templates. We’ll go through some Wix templates and see what those have to offer.
2:19:57
Maybe some Squarespace stuff. I don’t know. You guys can also, I’m thinking about changing, going from WDD Live to just something, maybe a better name, right? You know, it started out very focused in the beginning.
2:20:10
It’s becoming more of a variety show, which is great. We may rebrand this here and just do something like Geary Co. related or something like that. But you know, I would like you guys to start not just submitting sites for critique, but maybe topical ideas. Maybe I’ll set something up on the website. You guys can submit things.
2:20:29
Hey, we really need to talk about this. We really need to talk about X, Y, Z. And then we’ll do that. We’ll have that discussion. I want to have guests on. I want to bring guests on the show from time,
2:20:38
not every time, but from time to time, spice it up a little bit. Okay, there’s a lot we can do with this. So stay tuned. I love you guys. I appreciate your support.
2:20:45
I appreciate your support. And I will see you again next week.
