WDD LIVE 086: Website Critique + ACSS/Etch SCSS Innovations + Q&A

Oh, holy smokes. Okay, we are ready to go, I think, finally. Let me get comments and reactions up. Good morning, everybody.

Let me know if you can hear me, if you can see me. I had a technical problem with the Elgato fill light right here.

It was not connected to, I don’t know, like randomly it was just not connected.

So I had to try to reconnect it. It took like a few minutes to do that.

We’ve got contractors upstairs doing some work in the kitchen.

My wife’s at Pilates. My kids are right outside the office.

This is chaos today. I was at the dentist half the damn day yesterday, so my mouth hurts.

Yeah, I cracked a tooth like over Christmas break, and then they couldn’t get me in until today

because the tooth that cracked had a filling in it. It’s one of those mercury fillings

because dentistry apparently thought it was a good idea to like try to poison everybody.

So I needed to have them remove that, put in a new one, get a crown going.

It’s a little hectic. It’s a little hectic around here these days.

So yeah, this is okay. We’re seeing, we’re hearing you. We’re good.

All right. Excellent. Let’s go over the agenda today. Let’s just get right into it.

The best way to exit the chaos is to get into the agenda for today.

Well, first of all, thank you for being here with me.

We got a good showing so far.

The agenda is very simple. In segment number one, we’re going to be doing a website critique

of Hooli.

It’s Hooli.io.

I haven’t looked at this site yet, but I am the target market for this website,

which means that when we do copy analysis, especially, I can give feedback that’s actually,

you know, from the perspective of somebody this site is supposed to be for.

So that’s good. That’s not always the case.

Sometimes I have to guess like, well, how would the target market feel about this copy?

Right?

So that’s good. That’ll be the first 30 minutes.

Then the second segment, we’re going to take a look at some innovations that we are doing

in ACSS, which are going to bleed over to etch.

Some really, really fun, cool, exciting stuff that really hasn’t, I don’t think hasn’t been

seen before.

And then we will go into Q&A.

And you guys can ask anything in the Q&A segment.

You can actually put in your questions now if you want to.

You just need to make sure that they have hashtag Q before your question.

That way I can find them when I get to the Q&A segment.

Okay.

Everybody says Hooli is a banger.

Yeah, I’ve gotten a lot of great feedback on this Hooli site.

Again, I haven’t looked at it in any sort of detail.

We’re going to do that together.

So this is going to be fun.

Okay.

Let’s see.

Yeah.

Mark Szymanski’s.

Oh yeah.

Okay.

I had the same thing with the key light.

Turn the button on and off sometimes.

Yeah, no.

So that didn’t work.

It normally works.

I had to do a hard reset, 15 second hard reset, reconnect it to wifi, then get it to show

back up in control center.

I had to do all of that in like the three minutes that I was late.

So it was a little bit of a scramble.

Okay.

All right.

Well, let’s just go ahead and get into it.

Like might as well.

Right.

Let’s let me pull up Hooli.

And then we will screen share.

And let me see if our resolution over here is good.

I got to find ProRes.

Pro.

Oh, no.

Res.

Easy Res.

I can’t remember the names of all these things.

Okay.

Easy.

Where is Easy Res?

I opened it.

Now, where did it go?

There it is.

Okay.

And yeah, we want to be 2304 for everybody.

That kind of helps.

Okay.

Let’s go ahead and share.

So Hooli.io.

We’re going to start with our no scroll test.

And then we’re going to go from there.

So not allowed to scroll.

Can I figure out where I’m at?

What’s going on?

And who this is for?

It says everything app for your teams.

Everything app for your teams.

Hooli is an open source platform.

Serves as an all-in-one replacement of linear, Jira, Slack, and Notion.

Notion.

Okay.

So, you know, the headline is the headline.

It’s okay.

It’s whatever.

The lead paragraph, very enticing.

And here’s why the lead paragraph is enticing.

Open source platform.

Let’s get to open source in just a second because I want to just make a little side comment here about open source.

Okay.

Serves as an all-in-one replacement of, and then it gives me specific examples.

And the specific examples that I’m reading, linear, I use that currently.

So ears perk up.

Jira, switch to linear from Jira.

Okay.

Slack, we don’t use that.

Notion, we do use that.

So, like, three out of the four things that they specifically named, I have, well, I have experience with all of them.

We actively use two of them and was using one of them.

So, right away, I’m interested.

I’m interested.

Now, just the thing on the open source.

Because we are going to get to this website, which is quite fancy.

And I just, I feel like, you know, we’ve heard in the WordPress ecosystem all this time, it’s bad because it’s open source.

It sucks because it’s open source.

That’s essentially what all of the arguments boil down to.

Like, if you complain about anything, if you’re like, ah, I really wish this should be a lot better.

It sucks because it’s open source.

That’s the thing that you’re going to hear over and over and over and over again.

And I’m looking at this and the design, like, you know, the design and just the UI, the intricacy of the UI obviously doesn’t suck.

I was told, I’m sorry, I was told that if it’s open source, that means it’s going to suck to a large degree.

That’s like the ethos of WordPress.

Is it anything that sucks about this is because it’s open source.

You know, it’s never leadership.

It’s never, you know, like getting your shit together.

It’s just always, well, it’s open source.

So, it’s bound to suck.

So, yeah, I just want to, maybe this is kind of proving that that narrative doesn’t carry a lot of weight maybe.

Okay.

So, let’s keep going.

Well, let’s start here.

Let’s get to the header.

We did the little hero.

Let’s get to the header up here.

Oh, look.

Oh, got a little mouse interaction going on there.

Okay.

Pricing.

Very interesting.

They start with pricing as the first link.

You don’t see that very often.

We’ll come back to that.

Maybe see what you guys feel about that.

Resources.

I think maybe they did that because there’s really no product pages, it looks like.

Yeah.

There’s essentially, so I think this homepage is kind of going to tell us all we need to know maybe about the product.

We’ll see.

But that leaves the nav to just be like, all right, you saw everything on the homepage.

Now you go to pricing.

Then there’s a download.

Star us in Git.

And then you can sign in.

You can get started.

Okay.

So we’ll go through all this.

I mean, what I like, what I like, because you guys know I’m not a big fan of like mega menus and intricate menus.

I, you know, there’s a very intricate UI in terms of this website and a lot of the dev stuff that’s going on here.

But they kept the menu.

But they kept the menu very simple.

You know, I like that.

You know, like that’s a big priority.

And UX, I know to a lot of people, the mega menu stuff, very fancy.

They love, oh God.

I mean, eye candy guys.

The more eye candy we can put in, the better it’s got to be, right?

Not really.

The UX can get very bad, very fast.

The more complexity that you add.

You have to be very careful.

Okay.

And a lot of mega menus just, they don’t need to be there.

They don’t need to be, they can be very simple.

And if you reduce them, you would get more click throughs to internal pages on the website.

You would have people converting at a higher rate.

They wouldn’t be getting lost so much.

So this is good to see.

I like to see a nice, clean navigation.

Not a gazillion options.

Everything, you know, it shows me where I’m going to go.

Okay.

All right.

Try it free is the main button.

I do like this button effect.

I do.

I do like this button effect.

Okay.

But that’s the only option I have.

This is try it free.

Which is good because there’s no barrier to entry.

If you have free software, there’s that’s, there’s no barrier.

To entry to getting it.

So you might as well go that route.

All right.

So let’s scroll down.

You know, I like this animation coming in.

It puts the, it takes the eye down to the, the graphic, which is nice.

I’m looking at the interface here.

And okay.

Everything you need for productive teamwork, team planner, project management, virtual office,

chat documents, inbox.

Okay.

Okay.

I don’t get the, the one.

The second downside that I would say to this hero section, you know, it, it doesn’t give

me a lot of context.

Like, okay, great.

There’s a team planner.

I don’t, I don’t really know what that means.

Like team planner.

It’s got a, it’s going to get, does it have a good UI UX or not?

Like, does it have the functionality?

I don’t know yet.

I just have a lot of questions.

Project management.

Okay.

I get that.

I don’t know what a virtual office is necessarily.

I guess that’s for maybe for meetings and things like that.

Chat documents, inbox, things I would expect to have, but the existence of these things

is not actually what’s important.

It’s how they’re put together, how they work and how they function.

Without that information, it doesn’t really do me much good.

So maybe a video would be a better option here than just a random screenshot.

Which by the way, you know, it’s, it does look like a fantastic UI, but it also looks like

there’s a lot going on.

One of the big things that I’m critical of about ClickUp, for example, is this just the

insanity of the amount of stuff going on and the complexity of, of everything.

And it makes you, the one thing you have to be careful of with these kinds of tools is

that you think, and this is very, I have to be very careful with how we’re using Notion

because of this.

You think you’re signing up for this tool that’s going to make you hyper productive and it’s

going to do all these things for your company, right?

Your business.

And then what you realize is, oh, I’ve, I have now shifted from being a developer of

my own product to like the, a, a, a part-time engineer of this project management tool.

Like I have to be a part-time Notion engineer.

I have to be a part-time Jira engineer, right?

Um, that’s, you know, if they can simplify that, that’s a lot better.

Okay.

This is one thing to look out for.

All right.

Unmatched productivity.

Huli is a process, project, time, and knowledge management platform that provides amazing

collaboration opportunities for developers and product teams alike.

Okay.

Um, that’s all fine and fantastic.

I would like to see copy that’s maybe more geared toward the result that the person is

going to have when they use this tool.

Like it’s, you’re telling me all the things it does, uh, but I need to know the result.

One result we can see that’s very obvious is going to be an elimination of, of, uh, bouncing

around between different tools.

Like the fact that I have to bounce between linear and Notion a lot.

Now, in some cases, okay.

And I think if Mateo, like Mateo, my CTO, if he, if he was on the live stream right now, he

might make the case that that compartmentalization of stuff is actually very beneficial.

That linear is for tracking tickets and things that we are actually working on.

And then Notion, for example, is for ideas and future stuff.

And we don’t want that stuff necessarily inside of linear.

Okay.

So there are pros and cons.

There are benefits to having things compartmentalized like that.

Um, but if we talk more about results, if we talk more about like how teams are, what, what

does, you know, greater efficiency or productivity look like for teams in the real world and why?

Like what, what specifically about the software has created those outcomes.

At some point we need to try to get into that territory versus just look at all the things

are our software does.

Um, okay.

All right.

Let’s look at these images.

These, we got a little bento grid here.

I mean, graphics, obviously I don’t mind these animations too, by the way.

So I’m not a huge fan of animation, but these are animations that don’t get in your way.

Nothing has hijacked my mouse yet.

The minute something hijacks my mouse, you’re going to hear about it.

Okay.

Nothing has hijacked my mouse.

The animations are very subtle.

They’re well done.

Okay.

Keyboard shortcuts.

Work efficiently with instant access to common actions.

Okay.

But like linear, for example, it’s full of keyboard shortcuts.

These aren’t like new things.

This is not like an innovation kind of area.

Team planner.

Keep track of the bigger picture by viewing all individual tasks in one centralized team calendar.

Fairly certain I can do that in linear.

Time blocking.

Transform daily tasks into structured time blocks for focused productivity.

Okay.

Okay.

So it’s like a, it’s a calendar essentially.

Right.

Is there anything else that they need to tell me about that?

I don’t know yet.

I just, I still have a lot of questions.

Okay.

Certifications.

Keep up to date with any changes by receiving instant.

Okay.

I get those in linear too.

I get those in notion too.

You see what I’m saying?

Like so far, it’s like, okay, we’ve built this thing.

It does so far all the things that all the other tools do that you already use.

So I’m still wondering where the big value is going to come from.

Work together like in the office.

Create customized virtual office spaces for any department or event with high quality audio

and video conferencing.

Okay.

So we, we already have this in, um, uh, my brain has too many things to think about.

Discord.

Uh, we already have this in Discord.

Now it would be advantage, an advantage.

So we have chat and Discord.

That’s what we use.

Discord chat, these team meetings, uh, screen sharing together, yada, yada, yada.

Would it be nice if that functionality was in our project manager?

Probably.

Yes.

Yes.

Probably.

That would be a big benefit.

Okay.

And if, if, if Hooli wanted to make this more personal like that, they, they would mention

like, cause where are you doing this by the way, right now?

All right.

You’re not doing this in notion.

You’re not doing this in linear.

You’re not doing this in Jira.

You’re not doing this in Slack.

Well, you would be doing it in Slack.

Okay.

So this is where they could mention things like, okay, you don’t have to do this stuff in

Slack anymore.

You don’t have to do this stuff in Discord anymore.

You don’t now it’s now these meetings happen where your work is.

Work is already living, right?

Bringing back those references in a section like this would be, would be very nice.

Collaborating with remote teams is easy in your virtual office environment.

Enjoy real-time communication without additional software hassle.

Okay.

Customized workspace, audio and video calls.

Good, good, good.

Invite guests.

That’s a benefit too.

You can invite guests.

Okay.

And this is just a, you know, it’s not anything we can actually play.

It’s just a nice little animation kind of thing.

And I like the background back here.

That’s nice.

Okay.

You got the little vibes here of like communication.

Okay.

All good.

Really, really like from a, it’s, it’s, it’s top notch from a UI design perspective.

Sync with GitHub both ways.

Manage your tasks efficiently with Hoolies.

Bi-directional GitHub synchronization.

Advanced front-end GitHub issues in GitHub.

Okay.

So obviously we have this in, in linear.

So it’s not, again, it’s not an area of innovation, but it is, it’s, I’m gathering that most of

the value here, other than it being open source, which they haven’t even talked about yet.

Okay.

And, you know, I, I, well, we’ll get to that later.

That’s going to be another, it’s going to be another video.

And I think that’s more specifically going to be a rant about open source in WordPress

versus open source in other software applications.

But whatever.

It’s mainly a unification of the tools is where I’m seeing the value so far.

I’m not seeing any major innovations.

I’m just seeing value being in unification of the tools.

Two-way synchronization.

Okay.

Private tasks, multiple repositories, milestone migration, track progress, advanced filtering.

These are all things that are, these are not new to JIRA or linear users.

Okay.

Other than the fact that JIRA is atrocious.

The UI is awful.

I hate it.

Linear is way better.

Linear is way better.

But I, I really like linear.

It would be difficult if you’re like, here’s a, here’s a linear that just, you can have meetings

in.

Okay.

I mean, I don’t know that we’re going to switch.

Like, it’s a big hassle to switch.

I don’t know that we’re going to switch just for that.

These are just my honest thoughts as like, Hey, this is, I’m the target market for this

product.

So, um, you know, Hooli could potentially use this as, as a, you know, really good feedback.

Hooli meta brain.

Okay.

Connect every element of your workflow to build a dynamic knowledge base.

Soon Hooli AI will turn into a powerful asset, a second brain for your team.

Okay.

I’m perking up here because this, uh, this is an area where we have, uh, we, there’s room

for improvement because we have linear, but then we try to do a lot of internal documentation

in notion.

Obviously those two things don’t really talk to each other.

Uh, and then we have GitHub and you know, I, maybe you can sync GitHub and notion and all

that, but because notion has the AI component where you could potentially ask the AI questions

about your internal documentation, uh, which would be very helpful.

But now we’re talking about spreading this stuff out across three different places.

Obviously unification there would be very, very important.

Very important.

So this right here is, uh, yeah, very interesting to me.

Connect every element of your workflow to build dynamic knowledge, but yeah, second brain for

your team.

This would be good.

Create tasks, schedule your personal events and tools.

By the way, this is inverted radius.

Okay.

Um, and if you know anything like ACS has been paying attention, we have a, we have a, um, we

have a, uh, inverted radius framework now.

Uh, it’s probably the easiest way on the internet to create inverted radius.

Cause they are an absolute pain in the ass.

Uh, but here’s the thing is this is fake.

This is not, I can already tell eyeballing this, that this is fake.

Um, and we will, I’ll inspect it cause I’m, I’m interested in how they did it in just a

second, but I already know that it’s not actually done completely with CSS.

Uh, cause it’s not possible.

It’s just not the, the pattern that I’m looking at is not, doesn’t seem possible.

So we’ll take a look at that.

Um, create tasks, schedule your personal events and to do’s.

I don’t know why that’s listed under this though.

I mean, you could like literally every software product they’ve mentioned so far does tasks.

Like, so that, what does that really have to do with this meta brain?

Take notes, create documents to keep track of team resources.

Okay.

I can, I can do that anywhere.

Sync in real time.

Connect your team instantly to monitor progress and track updates.

I don’t really, I don’t really know what that means in this context.

Plan your work, visualize your work day in your planner.

I don’t know what this has to do with meta brain.

I thought we were talking about knowledge bases and AI, uh, chat with the team, send DM and

these, these feel like random like features that don’t really have to do necessarily with

what I was interested in here.

Manage projects, customize your works.

But again, we already talked about this stuff.

Um, this is a huge disconnect for me.

Like this was very interesting.

And then this seems like it just says all the same shit that I read above.

I think this needs to be improved.

Uh, how, how they’re, how they’re presenting this meta brain concept.

I think massive room for improvement here.

This is a kind of a letdown.

Like I was really hyped to know more about this and it, this fancy shit down here.

And I know they spend a lot of time on it, but unfortunately it doesn’t communicate what

this head headline and lead paragraph are communicating.

So I would say this is probably the worst.

This is probably the worst section on the page.

Um, okay.

Knowledge at your fingertips.

Hooli offers a wide range of features, create, manage your project documentation.

Hooli suite of collaborative editing tools boosts team efficiency.

Uh, documents.

I really like this.

I really like this UI of like, you’re in the UI in the copy.

Like I, that’s very, uh, creative.

I like that.

Can be used for sharing reference materials among team members, collaborating, romance

during meeting notes, and assigning action items with live real time.

See how they did whenever you have to do longer form content.

Look, okay.

Look at the principles we’ve talked about before.

We’ve talked about readability with content width.

Don’t go wide with your content.

Just cause you have to, it’s like, oh man, I got to put in long form content.

That doesn’t mean it has to be the whole content width of the website.

You have to create columns.

Okay.

Narrower columns.

Whenever you’re going long form with content, narrower columns, and then put graphics on the

side.

Sticky is a very common use case for this.

Okay.

So you see they’re employing sticky, uh, it’s like a sticky sidebar kind of situation.

So just take notes on this kind of stuff.

This is exactly how, when you’re faced with long form content, you approach it from a layout

perspective and a design perspective.

With live real-time collaboration, remote teams are able to work together to bring a unified

vision.

I don’t like the, well, okay.

It’s great.

I can move it around, but it’s, it’s covering the content.

I mean, it just doesn’t, this isn’t really add much.

Um, it’s, it’s fun to play with, I guess, whatever.

Tagging users, linking to issues and assigning action items are just a few of the powerful

features available within the Hooli document editor.

Okay.

Great.

So what I’m gathering here is like when I, when I, when it’s time to write documentation

and all that gets going to be a very nice, uh, and, and powerful editor, which is, which

is great.

Okay.

I have that in notion already.

Okay.

But it is nice that I unify this into one tool.

Okay.

And then I can join the movement, unlock the future of productivity with Hooli.

Remember this journey is just getting started.

Okay.

I’m, I’m, I’m guessing that they’re not, I think they could alluded to it, but what,

what do they see as the value of open source in this regard that I, um, cause let’s see

community download.

Okay.

Resources.

Is there like a, uh, create an account.

Is there like a hosted version of this?

That’s what I’m wondering.

Okay.

Let’s go to pricing.

Okay.

Now they’re going to talk about open source.

Okay.

They didn’t talk about, I was wondering why they didn’t really mention it on the homepage

anywhere.

The Hooli team prioritizes open source software, ensuring Hooli remains free to sustain cloud

operations for the development.

Cloud users will be charged for consumed cloud resources.

Resources are currently falling into three categories.

They’re in the data side, blah, blah, blah, blah, blah, blah.

Um, okay.

Community resource charges.

All right.

Okay.

All right.

Yeah.

Um, this is good pricing, by the way.

What?

Let me go.

Linear pricing.

What is, what is linear up to these days for their pricing?

I don’t even know what I pay.

Uh, I think we’re on the, I don’t even know what plan we’re on.

Um, okay.

16 per month per user.

Yeah.

Yeah.

We would save, we would save money.

It looks like, uh, with Hooli.

I really like this.

This is another animation that I really am enjoying.

I’m really enjoying that animation.

I like it.

Uh, okay.

Yeah.

They’re still not really educating on the, what the benefits of, they see the benefits

of open source in, in this kind of software would be.

Uh, I can go there.

Docs.

Let’s, let’s go back to the homepage.

Let’s take a look at, um, 99 on the pricing is interesting.

Yeah, it is.

Uh, let me go, go to common zero rare.

It’s a big jump between 20 and a hundred, right?

So let’s look at how they, let’s do a little pricing psychology here of how they, how they

broke this down.

For individuals and teams getting started, you get unlimited users, unlimited Hooli objects,

10 gigabyte storage per workspace, 10 gigabyte video, audio traffic.

That’s probably very low.

Three hours of video call.

Yeah, that’s very low.

Um, but it, but it’s a good, it’s good to get started for sure.

It’s good to get started.

Then they’re going to jump to $20 a month.

And we’re going to essentially just go to a hundred gigabytes of store.

Ooh, I like that.

Oh, there’s, oh, there’s a, there’s a, okay.

This is not so great.

I thought these were the only three options I was looking at.

I see now, see your brain, it depends on what your brain is focused on.

Right.

I see now that there’s a very slight gradient, like opacity fade out effect over here, kind

of alerting me to like, Hey, there might be more.

Uh, but there’s no arrows.

And, um, I just didn’t know.

I didn’t pick up on that.

So if they want people to see their other things over here, they may want to, may want

to improve that.

And then immediately I’m just going to see not accessible.

So anytime I see stuff like this, I’m like, I wonder how they handled accessibility.

And nine out of 10 times, the answer is they didn’t, they didn’t handle accessibility.

So I can go, I can tab navigate to that.

I can tab navigate to the next one, but it does not, the animation, the interaction does

not follow.

Okay.

Like you would expect to see this on tab.

And if I tabbed again, you would expect to see this.

That’s not happening.

That should be happening.

That’s not happening.

They need to make that happen.

They need to make that improvement.

And then you’ll notice the real problem with it is I can tab to the other options that I

can’t see.

See the scrolling also does not apply to tab navigation.

So that would be a fail in this, in this regard.

Okay.

So we jump up to not at a hundred dollars a month, which that’s probably the plan that

I would go at.

Because man, I could get out of, I could get out of notion.

I think I’d pay that for notion alone.

And then linear for sure.

I pay at least that more.

I think more.

They, they should really be talking.

Like I didn’t, I didn’t know that there might be a significant cost savings until I got all

the way here.

And if you’re like in marketing and copy and like, that’s a, like you’re, you’re, you’re

really putting a lot of faith in the other copy that the person is going to stay interested

long enough to make it here.

Okay.

Like I would be mentioning very like early over here that you’re not just replacing these

tools.

Like I would allude to like at a major cost savings in most regard, in most, in most cases

that like, I think that would get people’s attention, uh, in an important way.

Okay.

Legendary, uh, 10 terabytes of storage, two terabytes of video, audio traffic, one month of video call,

six participants nonstop.

You could just stream forever.

Seven days, nonstop, a video call per month.

I don’t really know how they’re like, how they’re, I don’t, how’s it translating in

my brain?

Seven.

I mean, we don’t do nonstop video call.

Can you give me something that like is referenceable and that makes sense to my brain?

Like hours.

I can compute hours of, if you’re like, that’s 30 hours of video calls.

Okay.

Like I know we’re not going to use that.

Um, I don’t know what seven days nonstop.

I mean, I don’t, or one month of, I don’t know.

That’s, that’s too much.

That’s too much.

They got to simplify that.

It’s too much to figure out.

So you have to make metrics.

You have to make numbers relatable.

Okay.

These are not relatable numbers.

Um, I like that they tried to provide context here, but their context just opened.

It just causes more confusion.

See here.

They provided good context where it’s like 1 million to 10 million documents.

So right away I can put myself.

Okay.

That’s, I’m not going to go over that.

I’m fairly confident.

I’m not going to go over that.

500,000 images or screenshots.

No.

And not anytime soon.

We’re not going to go over that anytime soon.

Um, so that, that kind of context is helpful.

Um, so that kind of context is helpful.

All right.

Uh, let’s go.

Where do we want to go next?

What do you guys want to talk about next?

I think we’re, we’re almost, actually, we’re almost at our limit here.

Um, we can look at some dev stuff.

I want to go down and see how they did this inverted radius situation.

Uh, tailwind.

Okay.

Tailwind site.

Not surprising.

Not surprising.

Um, you, that’s interesting.

I’m seeing a very large, like margin or padding.

Yeah.

Margin left.

Okay.

That’s like a solid object.

It is.

Look at that.

Look at that.

Cheaters.

You’re cheating.

Cheaters.

Um, okay.

Nah, it’s okay.

You just, you do it however you have to do it.

Because designers a lot of times aren’t dev and they don’t realize that this fancy shit

that they created can actually be deved.

Uh, like that’s impossible in dev.

Uh, pretty sure.

So that, and that’s why they just skipped it.

They were like, okay, well, we’ll just, we’ll just throw an image in there and make it

work.

Um, so yeah, this is not CSS.

This is, um, these are just graphics.

Um, yeah.

That’s a whole ass, yeah, card.

Okay.

And then they just stuck some text in the, in the top of it.

So if you’re wondering like how this is done, it’s done in a design tool.

It’s not, it’s not, this is not really done in dev.

It’s just the positioning of these little paragraphs, which they were good to like a lot of people,

a lot of people hate to say it would throw that text in the graphics.

Also, that’s a no, no.

And they realized, oh, we can’t do that.

So they threw the graphics in there and then they just, they position the text on top of

the graphics, essentially.

Okay.

Is there anything else you guys want to look at before we move on to segment number two?

Um, if we do a little recap here, UI fantastic.

You would pay, um, five figures just for the UI for something.

Like if you’re thinking about how, okay, like a lot of people ask me, how do I do this for

my client?

How do I do?

Well, how do you do this for your client?

Okay.

You find a client that has tens of thousands of dollars for just UI, just, just, just UI.

They’re going to have a major budget.

Number one.

So if you don’t have a client, like if you can’t check that box, if the client doesn’t have that,

then you can’t do this for your client.

Okay.

Uh, you also have to have a major dev budget.

You also have to have a client by the way, who values this detailed of a UI and this detailed

of development practices to pay way more for the site, just for those things.

Okay.

So that’s another prerequisite because let me explain something to you.

What you’re seeing here in terms of UI and all this fanciness.

has probably a negligible impact on conversion rates.

I would love to see an AB test between a static, like no animation.

And, uh, we could tone down the UI a little bit and then compare that to this.

And let’s just see what the conversion rates are.

Um, I would gather that if they put far more, like just, they already did a good investment

in their copy.

The copy is, it’s not bad by any means.

It’s good.

There’s some room for improvement just in terms of like, like I mentioned down here, um, with

copy and graphics kind of being out of sync a little bit, but I would gather that the conversion

rates would be roughly the same.

So where is the ROI in all of that extra expenditure and time?

By the way, keep in mind, if you were doing like a redesign of this site, a simpler version

would hit the market faster.

And that’s would start getting sales and ROI from that launch, that deployment way sooner

than this version.

This version would take way longer to achieve.

And that means perhaps months, weeks at minimum, weeks at minimum of the thing, not being deployed

and not getting the results.

Okay.

So there’s another opportunity cost that you have to factor in here.

So while we like this and it’s, it’s really us as developers and designers, you know, we

really like it because we know how hard it is.

We know how difficult it is to achieve this kind of stuff.

We love it.

We’re like, man, that’s just fantastic.

But from a business perspective, does this really achieve a business objective that was

not previously achievable?

Yes or no?

Because from a finance and a business perspective, if it’s my company, you have to really show me

where I’m getting that money back and why I couldn’t get it without this stuff.

And that’s a very tough sell.

It’s a very hard case to make, which is why I don’t sell animation to clients.

I don’t sell top notch.

Like I don’t sell balls to the wall UI design to my clients.

Right.

Because I can’t, I can’t promise them they’re going to get that money back.

Like, like, you know, it’s just that that’s kind of the truth.

John says the $75,000 project.

I’d love to build a button with this nice effect that follows the mouse cursor.

Nick, Nick says it was an $89,775 homepage.

Yeah.

Homepage, homepage, homepage.

Right.

I believe it.

I absolutely believe it.

So if a company has that money to burn and blow and they just love to, they just love to look at it themselves and they appreciate that kind of thing.

Okay, great.

That’s fantastic.

A lot of clients will say, no.

Why are we, can’t we spend that money elsewhere?

That’s a lot of tens of thousands of dollars that can go into Google ads and Facebook ads and TikTok ads and LinkedIn ads and copywriting and blogging and SEO.

And a lot of other areas where we can get definitive ROI metrics and we can actually move the needle for the company.

Most businesses would choose to put the money there.

Okay.

So you have to keep all of this stuff in context, all of this stuff in context.

If you’re trying to win a dev design award, you go this route.

But again, now, the one thing I will say, okay, if you’re going to go all out, you need to go all out.

Because here’s the one thing where this does move the needle.

If you do something that’s so above and beyond what other people are doing, and maybe you could argue that this is or not,

it is a magnet for backlinks.

It is a magnet for word of mouth traffic.

Hey, I have you.

And I would argue, okay, I would argue if you’re going to do it, this is the industry to do it in.

Why?

Because you know who’s going to be impressed by this and so much so that everybody links to it and everybody talks about it.

Their exact target market.

My comments a minute ago where it’s like most businesses won’t pay for this and shouldn’t.

It kind of does make sense for this business to do it.

Because people like us sharing this and talking about it and linking to it gets it in front of more people like us.

And that’s their target market.

I know you guys, a lot of you are web designers.

So this isn’t really your, see, there’s some bleed off.

But a lot of software developers are probably going to be sharing this and linking to it and talking about it, which does directly benefit them in terms of marketing.

But selling this kind of, imagine selling this kind of design to like a fucking plumbing company.

You are out of your mind.

You are, you are just, just take their money and light it on fire.

Okay.

It would not, you would not get a return.

But I think Hooli is going to get a return simply because of the people that would be impressed by this tend to be in their target market.

Okay.

We’ll, we’ll put this away for now.

I’ll just go to comments real quick.

I don’t like how the center paragraph on the homepage jumps around.

There’s not a one content line.

I don’t like how the center paragraph on the homepage, center paragraph on the homepage.

Right here.

Right here.

Right here.

I don’t.

Yeah.

I mean, this is the problem with, this is why we talk about consistent content with, you see those.

But it’s, it’s not.

And then there’s another one.

Like how many content widths can we find on this site?

Right.

After a while, it gets a little chaotic to the eye.

You see what I’m saying?

Well, that, in all fairness, that last one’s not there.

It’s more here.

Okay.

But it starts to get a little chaotic to the eye with all, like you can, you have some wiggle room and how you’re doing.

But if there’s way too many, it does start to feel a little bit chaotic.

I would argue that it’s probably not so bad in this regard because the content is not near each other.

Like by the time I’ve gotten through that one, I can only see this one.

That’s really the content line there, kind of.

And that does align except for this.

Okay.

But it’s not that big of a deal to me.

I’ve seen it when, when, when there’s look like it’s kind of saved by all this white space.

I hate that that moves around sometimes, but they’re using a lot of white space between their sections.

And that’s helping because every section that we look at, we can’t really see the other sections.

So our eyes not measuring and comparing one to the other, but on like sites with less white space where everything’s more cramped.

And then there’s too much difference in the content widths.

It does kind of create a sense of chaos.

I opened the website once on my iPhone, Safari crashed.

Yeah.

Safari is, Firefox actually, I think is the worst now.

There’s really not much sense in looking at this.

A lot of people want me to pull up the mobile versions, but it’s really, it’s usually not worth it.

It’s a lot of what you would expect to see.

Unless we’re looking at something like a lesser skilled person built, then it’s like a lot, you’ll see a lot of disasters on mobile.

But yeah.

Okay.

Let’s move on to segment number two.

I think we’ve done enough here.

We kind of got our, our main takeaways.

Let’s move on.

All right.

We’re going to be talking about some SaaS developments that we’ve had in ACSS 3.3.

I think this is really, really cool stuff to look at.

If you’re, and I’m just going to explain.

So many of you may not know, like what, what is SaaS?

What, why would I use, why would I use SaaS?

We are, let me, let me clear this out.

This is the testing for ACSS 3.3.

So I will clear that out real quick.

I’m also going to talk about some things that are still coming down the pipe.

And these are not new features.

This is not like, if you go to, I would encourage you.

And a lot of this applies to etch too.

If you’re an etch purchaser, if you’re looking at etch, you’re going to want to hear this stuff too.

I would heavily recommend you read this blog article.

The ACSS bug tractor is empty.

Here’s what that means for 2025.

We go down and we start talking about our three words for 2025 are stability, simplicity, and support.

We are not focused nearly as much on feature, feature, feature, feature, feature,

which by the way, is hard for users to keep up with.

We’re much more focused in 2025 on stability, on simplicity.

And with simplicity also comes efficiency and superpowers with regard to what you’re already doing

and how you’re already working with a tool like automatic CSS.

Just to make life like, man, so much more seamless.

Like another S word, because we’re using the S kind of theme here.

Seamlessness is like another one, right?

Speed would be another one, okay?

And so this kind of, this update coming 3.3 really speaks to a lot of that stuff.

And this is an innovation that is going to carry over into etch, which is super exciting.

So let’s see.

Yes, Justin says sneak peeks.

Yeah, people love, people love the sneak peeks.

Okay.

So let’s go into edit with bricks.

And I’m going to come do this on the front end just because it’s,

it allows you to focus better when we’re on the front end because you don’t have the cockpit of like bricks surrounding everything.

So I’ve added a container here with the class some container.

And I’ve added a, let’s, let’s call this some button.

Let’s just keep everything like, you know, the same consistent.

Here’s some paragraph.

So we’ve got some container, some button, some paragraph.

Okay.

Let’s just save that.

I think that’s enough.

Let’s, let’s head to the front end.

And I want to talk about the limitations and like the, the annoying things with the existing custom SAS area in ACSS.

We have this area called global SAS and you open it up and you can write any globalized vanilla CSS.

So the first thing you need to know about SAS is that it supports vanilla CSS.

So if you have no idea what SAS is and you’re like, ah, that sounds scary.

I don’t know what that is.

You don’t have to know.

And you don’t have to care until you want to, because if I wanted to write anything in here, okay.

I had like what some paragraph or something.

And I did something like color red.

You see the paragraph turns red.

This is vanilla CSS.

This is not SAS.

There’s nothing spectacular about this, right?

Every, this is whatever CSS you need to put here.

You can put here.

You don’t have to change it.

You don’t have to edit it.

You don’t have to convert it.

You don’t have to do anything.

You just write vanilla CSS here.

You’re good to go.

You get instant preview.

You’ve always had instant preview.

But the one annoyance here is that the minute that you went to the SAS route, because SAS is a, it’s like a hyper CSS language.

I’m trying to figure out how to explain it in very like layman terms, right?

It’s like CSS with superpowers, but those superpowers have to be processed.

There’s a SAS processor.

And even in your, if you’re in VS code, right?

You’re writing SAS and VS code.

You have to save.

The processor has to run, and then you can finally see what you’re doing.

And so you’re committing those things to the database.

If you’re doing this in WordPress, before you can see them, you have to commit them to the database before you can see them.

And every time you need to re-see what you’re doing, you got to re-commit, re-save, re-process.

Then I can see what I’m doing.

By the way, the page also has to hot reload.

And so it’s very annoying.

And then what would happen is, which if you’re writing only SAS, you would expect that to happen.

You would expect that to be the case, and you would just deal with it.

But when you combine vanilla CSS and SAS in like an area like this, your vanilla CSS that you’re writing like this could not be previewed

because there’s a mix of SAS and vanilla, and it’s like, we don’t know what you’re doing until you save.

Then we can process it and parse it and then show you what the hell you’re doing.

And so it would be very annoying because you use one mix-in.

You could have a thousand lines of vanilla CSS, but the minute you use one mix-in or one function or one SAS variable,

the entire thing loses its capability to be instant previewed, and everything now has to be saved and parsed and processed, right?

On every preview.

So what we were like is, well, hold on.

Does that really have to be the reality for users, you know?

What if we could process on the fly?

What if we could not just instant preview, but instant process, like the whole thing?

And if we did that, like how long would it take, okay?

So let me back this up.

We have some link.

I’m just going to border check this.

Make sure that we’re selecting it.

Border five pixel solid red.

And let me see if some link.

Let’s go look here.

Let’s take a little look-see.

There is another issue here with bricks.

There’s some brick specificity issues that we’re looking at.

Maybe we can tackle them.

Some button.

I’m sorry.

I put some link.

It’s called some button.

Okay.

So let’s do some button.

All right.

I’m going to peel this out so it’s easier for you guys to see.

Okay.

So we did our little border check.

Again, this is vanilla CSS, so not a big deal.

Okay.

But I want you to pretend that that link right there is like a third party.

And this is very often the case.

Okay.

It’s a facet.

It’s a link that a third party plugin added.

It’s a form that’s not supported by ACSS.

And I need that link to look like a button.

And the easiest way to do that.

In vanilla CSS, that would be a huge pain in the ass.

In Sass, you can use what’s called a mix-in.

A mix-in is like an encapsulated recipe.

It’s like it contains all of the styles for that thing.

And you just apply it with one line.

Okay.

And this would be where you would have to process.

Right.

So I can do add, include button.

And you’re going to see it immediately turns it.

I did not save.

Okay.

I did not hit that button right there.

You can see that this is still the yellow dot indicator saying, hey, this is not saved.

Okay.

I did not process that.

I did not save it.

That is a Sass mix-in.

You are looking at instant processing.

This is instant processing and instant preview.

It doesn’t even need to hot reload.

It’s just the same as if you were writing vanilla CSS.

And it will do this all the way down the line.

Okay.

If I wanted to primary button outline this, that’s an argument of the mix-in that you can

say, hey, I want a button and I want it to be the primary button, but I want it to be

the outline variant.

And by the way, this is all documented, of course, in ACSS.

But that just applied dozens of styles to that button, like from ACSS.

These would, this would look exactly like my other ACSS buttons now.

Right.

This isn’t, I don’t, I don’t know that this is possible anywhere.

So this is, you know, this is, this is very interesting stuff.

This is just one of the, of the new things, new aspects of this.

Let me pull up my notes.

We can go through all of it.

Okay.

So you can also now, remember what I said, the, the, the big annoyance was the minute

that I’ve done this, I can now no longer write vanilla CSS without constantly saving and re-updating

because everything has to be parsed once it has SAS involved.

Okay.

But now I can do some paragraph and I could say color red and I’m going to get the live.

It doesn’t matter that I’ve used ASAP here because again, we have, it is live compiling.

It is live processing.

And so it’s going to reprocess the whole thing instantly every single time.

And we’ve debounced it to where it waits a second.

Like that’s why you’re seeing the, there’s like a very, very tiny delay.

And that tiny delay is fine because one, there’s that, that kind of delay in a lot of ways in

bricks, like just right doing vanilla shit anyway.

But we, we don’t want it to always be trying to process it.

Right.

Like there has to be, it has to wait for a second when you finish.

Okay.

So you can combine vanilla.

You can combine SAS.

That’s really good.

You can also now, you couldn’t do this before.

Okay.

And this opens an entirely new world.

But automatic CSS uses a lot of internal SAS variables.

Okay.

And you could not use them before.

You could not, you could, you could kind of like you could halfway do it, but they wouldn’t

receive updates from the dashboard, which essentially makes them useless.

Right.

So I’m going to do, we’re going to do some container.

Okay.

And I want to show you another very cool thing.

That’s only possible in SAS, not possible in vanilla CSS.

It’s a huge limitation of vanilla CSS.

Um, that you’ll be excited about this.

So just hang tight.

All right.

So we’re gonna do some container.

I’m going to do width.

Uh, actually let’s put a background color on it first and let’s do a background.

Um, this will demonstrate.

Okay.

Okay.

Let’s do primary light H.

All right.

Let’s do primary light S and primary light L.

Okay.

You see instantly.

Those are, those are SAS variables.

Those are internal variables that we use for creating colors.

Right.

Uh, it’s the hue, the saturation, the lightness value of the primary light shade.

Um, so that’s, that’s interesting because that number one, well, you could do that, but you

wouldn’t get your actual color.

And that’s because it can’t reach.

Those could not reach into the database before to grab your actual color.

They would always use the, whatever the default color in ACSS is.

Now that’s actually reaching into the database and getting your color.

Okay.

And I’ll show you how this all works in just a second.

Um, we can do padding of like space L.

All right.

And then translate this into edge guys.

This is not just global.

We think we can do this at the element level.

So element-based CSS, like you have in bricks and, and, um, where else, you know, quickly had

it right.

Um, element-based CSS, obviously a very important part of visual development, uh, and, and share

ability and scalability of your projects and taking things between.

And having a library, uh, and third party libraries of layouts and patterns.

Very, very important stuff.

Um, that will all be powered by SAS, not just see as, you know, like, and not just powering

it by SAS, but powering it with instant preview and instant compiling of SAS in edge.

It’s going to be an experience that does not exist currently.

Okay.

Let’s do a, let’s do a width of, you can also do math and SAS.

You can do math and SAS without calcs as well.

Um, so another internal variable we have is content width, right?

So we can do content width divided by two.

We do have some specificity issues in bricks.

I’m going to double this right here just so we don’t run into any, any issues.

Um, so you see it’s, it’s pulling this again.

This is, um, this is a actual SAS variable internal to ACSS, not something I created.

Uh, it’s just there, but now watch what I can do.

And this is what you cannot do in, uh, in vanilla CSS.

So I’m going to say at include breakpoint up, and I’m going to say, I want my Excel breakpoint.

Okay.

And what that does, that’s another mix in.

And this writes a minimum width breakpoint query for me, dynamically referencing my Excel

breakpoint.

And this is something that’s not possible in vanilla CSS.

Whenever you write breakpoints in vanilla CSS, you have to use static values.

So you have to know what your breakpoint values are and you have to reference them.

And then if they ever change in the future, your, your, uh, media queries will all break

because they don’t get the updated value.

In SAS, you can actually tokenize media queries and then you can, uh, mix in them like I’m doing

here.

And so it makes media queries very, very easy, but it also makes them linked.

Essentially.

They’re now intelligent.

They, they know the value your breakpoints are set at.

Okay.

So I’m going to go here and we’re just going to, we’re going to try some things, right?

Like I used raw internal SAS variables for the color.

And the question is like, does that look at that instantly.

It’s instantly recompiling as I just do this.

Right.

Um, this was impossible before.

This was absolutely impossible that this stuff without saving, without committing any of these

changes to the database, without recompiling and waiting three seconds.

And we’re going to talk about waiting three seconds in just a minute.

Okay.

Cause you’re going to love this.

Going back to the S’s that I was talking about a minute, making things speedier, making things

more efficient, making things more streamlined.

Right.

This is the kind of updates we’re working on.

This is the kind of innovation that we’re, that we’re working on right now in 2025.

Um, okay.

So we, we saw that.

How about content width?

Does it respond to content width?

If I change this to 1900, look at that.

That content width variable is responding in real time.

Even though it’s a SAS variable that in the past used to be in, in any other context would

have to be pre-processed.

It doesn’t have to be pre-processed here.

It’s instantly processed.

Okay.

We’re going from pre-processing to instant processing.

This is, this is pretty crazy.

Um, what about the, what about the media query or the, yeah, the break point that XL break

points based on 1366.

I said, this should happen at 1366 and up.

What if I choose a size that’s way bigger than my monitor?

Those styles should go away.

So I’m going to put, there they go.

They’re going instantly, instantly.

Those were based on SAS variables.

Those are supposed to have to be pre-processed, but they instantly go away.

Okay.

This is, this is imagine working with this completely inside of edge everywhere, not just global right

now in ACS, it’s just global because we don’t control the environment.

We don’t control bricks.

We’re not able to innovate bricks in this fashion.

We can innovate our own tool though.

Imagine edge working like this.

This is how edge is going to work.

Okay.

Uh, it’s going to bring something that really nobody has to.

And this is what we say.

When you, when you, when you build an environment for professionals, these are the kinds of things

you can focus on.

Cause we’re not concerned with like, oh, well, I mean, we got a lot of beginners to worry

about.

Like how do we make the UI better for beginners?

Right.

How do we turn, how do we innovate?

Like the innovation of something like breakdance, breakdance is, but they have, they, they innovate

away from innovation.

That’s crazy to think about.

They go, how do we go from classes to something way more, way, way less powerful.

Way like we had classes, which are awesome.

How do we innovate away from that to something way more basic called presets?

That’s like a anti-innovation.

They’re, they’re concerned with anti-innovation.

Um, the, uh, what was it?

What’s the, what’s the other tool?

It’s escaping my brain right now.

I have too many names of things in my head.

Um, the, the blocks, uh, fucking, uh, uh, generate.

It was right on my tongue the whole time.

Generate blocks.

They had a preset system.

It’s again, these, these, these builders find ways to anti-innovate.

Uh, let’s get away.

You know, beginners don’t know what classes are.

Let’s, let’s, let’s anti-innovate down to presets.

Okay.

What a waste of your time.

What would a, and, and by the way, what an insult to your intelligence that, oh, they’re

not, they’re not smart enough to understand classes.

So we got to give them presets, right?

We got to give them this anti-innovation.

See, etch starting with a different question in mind.

Etch’s question has never been, how do we design something that’s so friendly to people?

They don’t know what they’re doing.

People, anybody off the street should be able to use this.

Nope.

Nope.

Nope.

Etch asked the question, how can we actually innovate for professionals?

How do we make a professional workflow way better than it’s ever been?

That’s a fundamentally different question.

And this is the kind of stuff we work on when that question is the leading

question of the tool.

Right?

So it gets very fun.

Yeah.

If I say breakdown, I can’t say it again.

Oh shit.

I just said it.

So Ruben, Ruben, not only will Ruben appear, I will get a, I don’t even know what they’re

called on YouTube.

I’ll get a super chat.

I’ll get a super chat.

That’s equal to one third the cost of a cup of coffee.

So I have to do three streams.

I have to say breakdance three times on three different streams to equal one cup of coffee.

No, I love Ruben.

Ruben knows I love Ruben.

Okay.

So, oh, we’re not done.

We’re not done.

We’re not done.

Okay.

Let me, now, what you’re seeing is instant processing of SAS.

So we had instant preview of vanilla CSS.

We now have instant preview of SAS and vanilla CSS combined.

We have everything linked to internal ACSS variables that actually receive updates from the dashboard.

Tremendous, tremendous.

Now think for a second.

Here, here’s still a big headache.

Watch this.

I don’t like this.

3.48 seconds to commit that stuff to the database and reprocess it.

It was getting, because here’s the difference, okay?

Well, I don’t want to talk too much about the technology and the innovation,

but we are using an old school PHP processor for this part of it,

because that’s the only PHP processor that was available for WordPress.

We were kind of stuck with it.

And actually, if you look at the SAS, like the underlying SAS of automatic CSS,

a lot of it is out-of-date techniques.

And the reason you’ll see a lot of out-of-date techniques is because the PHP processor

cannot process the new techniques.

We get errors.

If we try to modernize the framework to latest standards, it breaks, okay?

Because the PHP processor can’t handle it.

It hasn’t been updated because it’s an open source.

We’re back to the, everything in open source has to suck, right?

It’s like two guys maintain it and it’s open source and there’s no funding for it, right?

So I think they have an update recently.

We haven’t tried it yet.

Whatever.

We don’t actually care about it anymore because we’re moving on with life.

So you saw instant processing.

Imagine if every click of this button was maximum half a second.

Just done.

Okay, done.

Move on.

And you can just hit it again.

Done.

Essentially done in real time, right?

That’s what we believe.

We’ve already done a bunch of initial testing because right now what we’re doing, not to

get too technical, is we are compiling, we’re processing and compiling the custom SAS that

you’ve written and the vanilla CSS that you’ve written along with our imports file, which is

all of the variables that are needed for the compilation of this area.

But that’s not the entire framework, okay?

We believe, and we’ve already, again, we’ve already done preliminary testing, that we can,

when we hit save, use the new processing method to compile the entire framework.

And as you see, it’s instant with this area and we’ve done tests on timing.

None of the tests so far have gone over half a second to fully save and compile and save the

database.

So this save action right here that usually takes two to three to four seconds on a good,

on a good machine, on good hosting, it can take seven, eight seconds on bad hosting, um,

will likely be down to half a second after this refactoring is completely done, okay?

So that is very, very promising and very, very exciting for users.

Okay, um, let’s see, what else?

There’s one other thing I think I wanted to talk about.

Okay.

Nope, we did that.

We did that.

We did that.

I think we did all of it.

Okay.

Um, and then you will see an expansion of the documentation to deal more with how do you

take advantage of all the internal variables in ACSS?

Um, and then of course, when we get into etch, like the breakpoint thing, the breakpoint thing,

you will love in etch.

If you can use SAS breakpoints at the element level in etch, that alone is a, is an absolute

game changer for responsive design.

Um, cause that’s just impossible anywhere else.

You cannot do that anywhere else on the internet.

You can’t do that.

You can’t do that.

So these are the kinds of things that will only be possible in a, in a, in a true, like

next, this is why etch is like, we’re, it’s a next gen tool.

Okay.

Uh, very, very critical stuff.

All right.

Um, let’s move on to questions.

So questions can be about anything, by the way, general Q and a business marketing pricing,

dev software, whatever, whatever you guys want to talk about.

We will go to Q and a, okay.

I’m going to switch over to cues.

All right.

How do you use is BG class and what’s up with the latest import conflict thing with

bricks?

It keeps interfering when I import frames.

Yes.

Okay.

Uh, we’ll cover that real quick.

Cause it’s not, um, shouldn’t be anything too, too difficult.

Uh, let me clear this out.

So it’s not causing any issues with what we’re trying to do here.

And I think this is a test copy.

As you can see the version number down here.

Um, I don’t, I don’t know what’s been merged from main and what’s not merged from main and

all that, but I think it’s up to date.

I think it’s up to date.

So if I put an image in here, we’ll just start with your first one.

Okay.

See, there’s even a delay in bricks.

It’s like adding an image, uh, moving the image around.

Okay.

So let’s select image and let’s just use this one insert.

Okay.

So I have this section right here where maybe I’m doing, uh, let’s, let’s add a heading.

Let’s add text.

Okay.

Let’s make it BG dark.

Okay.

My text is going to turn light automatically.

That’s automatic color relationships in ACSS.

All right.

I want this image, which is a real image.

I want it to be in the background.

Okay.

Um, so I don’t, I haven’t even looked at this stack.

I don’t know what’s turned on or not turned on.

Um, but there you go.

It works.

So you just put is BG is BG.

And now it’s, it’s, it’s in the background, the way that it’s supposed to be in the background.

Um, and notice the section got smaller.

Why did the section get smaller?

Well, the section was gigantic because there was an image in there.

But when you put that image in the background, that image is no longer applicable to the height

of the container, which now you would come to the section.

You could use, you know, a height class, right?

If you wanted to get that, that back somehow, then you could realign your text.

But here’s the cool thing about is BG.

You can actually just layer an unlimited amount of items.

I can put a div right here.

Just throw a div in there.

I can do a BG, a primary trans 40, and then I can go is BG, right?

And now I have an overlay on my image.

Notice still not on the text, an overlay on the image.

I just made it manufactured an overlay out of thin air, uh, that is primary color, transparent

40.

Okay.

I can do that with a texture and an overlay, a custom texture overlay in ACSS.

Um, and now I can just dial in the actual overlay style.

Like how, where do you want it?

What do you want it to do?

Right.

I could use any of these.

Let’s try this one.

Okay.

So I just made an overlay.

I can throw another thing on there.

Okay.

And I could do is BG and it’ll just keep layering them.

It’ll never get on top of your text, but it’ll just keep layering them on top of each

other.

Um, so that’s is BG, right?

It’s a, it’s a really unique kind of innovative class, utility class that we came up with.

Um, and it, and it’s, and it’s great.

Okay.

Let’s see.

Let me hop back to chat.

I just hate that.

I can’t see the chat and questions at the, at the same time.

Uh, let’s see.

Let’s see.

Let’s see.

Okay.

All right.

Let’s go to, let’s go back to questions.

Nothing really relevant happening in chat.

You also ask the, uh, the importer.

Okay.

This is the worst feature.

I guess, I guess it’s necessary, but the implementation of it is a nightmare.

Uh, I don’t have a frames license on this, on this install, but you import a frame and it’s

going to go warning, warning, warning.

You, you, you are importing classes that already exist.

Are you sure you want to do this?

And you’ve got to like click each one and be like, yeah, I’m super sure.

And then you do another frame and it’s like warning, warning.

It’s like no shit, Sherlock.

Of course the things I’m importing from the same set are going to share some classes.

It’s not a problem.

But bricks is like problem, problem, problem.

Like, and you just have to constantly manually bypass it.

They have to have a way to turn this off.

It is an absolute nightmare.

We didn’t ask for it.

Uh, the implementation is terrible.

It’s just, it’s, it’s, it’s gotta go.

So I think they’re adding an option for it.

And if the minute they do, the minute they do turn it off, just turn it off.

Uh, it’s really not that critical.

If you know what you’re doing and you’re not being a dummy, then it’s not going to be a

problem anyway.

It’s not gonna be a problem anyway.

So, uh, yeah, just turn it off.

When they give you the switch, it should be the first switch you turn off.

Okay.

Etch question.

How will you structure custom fields, metadata in the database?

ACF puts everything into post meta, which starts to make enterprise sites on workable

slow if a hundred thousand data points.

Yeah, we know, we understand.

Um, people have begged Matt for custom database tables for years.

Uh, he’s not interested in, in, uh, including them.

We can’t include them without a lot of re-engineering.

And I don’t know if it’s the kind of re-engineering that we’re able to do or

interested in doing.

I mean, we’re, we’re, we’re able to do it at the end of the day.

Um, but it depends.

Here’s the thing you would like, if you do this in ACF, you do custom database tables in ACF.

You have, there are always trade-offs, pros and cons.

You are foregoing, uh, the connection between your custom database tables and third-party

tools you might be using.

Like, for example, I don’t know that Bricks’ loops can pull from a custom database table.

I’m not sure.

I haven’t tried it yet.

Um, but I do know there’s limitations in this regard that you try to go do something else

in WordPress and it can’t access that data.

Okay.

Um, so that’s just to keep in mind.

Now, if, if, if we will explore this at some point, cause I know how important it is.

If it is doable, we will do it because it’s, it’s important to do.

Um, so, and because etch is a unified development environment and most of the things that you’re

trying to do with your site will be done in etch anyway, there shouldn’t be many compatibility

issues with other tools.

Uh, but yeah, we’ll, we’ll explore it.

We haven’t explored it yet cause we’re not there yet, but when we do, and if it’s doable,

we will absolutely do it.

Okay.

How can I optimize content with for consumption on high resolution devices like TVs?

I believe specifying it in pixels does not achieve this goal.

Is there a way to manage it fluidly?

It’s generally not a problem.

Um, it, it really comes down to resolution, right?

Um, if I, if I change the resolution, instead of changing the content width, if I just change

resolution, uh, I should be on this monitor right here.

Um, so let’s take a look at what happens to content width.

Okay.

Look, it like content width, I’ll show you.

This is the content width of the website.

Okay.

I don’t even know.

We should, I should probably go to the homepage to do this.

Cause that had a different content width, the blog post.

Cause it’s a blog post.

This is the content width of the website.

Fairly close to the edges.

Uh, and this is really only because of resolution.

So now I go up to easy res.

And I’m just going to go to something else.

Okay.

Let’s go to 25, 60.

Look at the content width change.

Right.

So you can see, like, it’s just a, if you are on a TV and you’re like, man, it’s a little

narrow, just boost the resolution or you can always zoom in.

Right.

This is my content width effectively changing.

I’m on a larger screen.

I have more real estate.

I can zoom in on this and a site should be zoomable without breaking.

Okay.

So shouldn’t really be a problem to worry about large screens like that with your actual content

width of your website.

The screen user has the controls available to them.

Okay.

To bring that like into a bigger picture.

Right.

Okay.

What does everything app for your teams even mean?

Okay.

That was back to the, uh, critique that we did.

It means it’s, it’s the do it all app.

It’s just a way to say it’s it.

This app does everything.

This app does it all.

I also was like, eh, okay, whatever.

Take it or leave it.

It wasn’t, it’s not an award-winning headline.

Can you do a first look at the new Drupal CMS?

Uh, just like you do with web flow.

I’d like your opinion on, I never did.

I don’t think I did a first look at web flow.

Um, I did it with quickly and some builders.

I stick to the WordPress ecosystem, at least for right now.

Does the ACSS, SCSS also integrate with WP code?

You don’t need WP code boxes, SAS integration, uh, uh, anymore.

You do all, all SAS should now be done in ACSS.

Uh, which by the way, you also have, you know, the other thing that we, that we added

because, you know, I wanted it, people wanted it.

Um, but the ability to, to make this like, however big you need to make it.

Right.

Uh, it used to be confined to like that size right there, but now like I can get real wide

with it.

Even when it’s, even when it’s docked, I can get real wide with it.

Okay.

Um, and I could still, I could still see my old screen when I pin it.

So we’ve made a lot of improvements to all of this.

And so it’s a really nice experience now, especially in 3.3, when all the instant

processing is happening.

It’s just, it’s a kind of a game changer.

Like I don’t write any SAS anywhere else and don’t write global CSS anywhere else.

All of your global CSS and your SAS should go in that input right there, which by the way,

it also has things like multi-cursor editing.

It has find and replace.

It has, uh, auto comment navigation.

Okay.

Look at this.

When I, when I start making a lot of people still, still don’t even know this is a thing.

Okay.

Um, I’m going to go another comment.

Look, it built me a navigation, right?

And if I go nested one, two, one, two, three, four.

Okay.

This is under a comment.

Right.

And I go in here.

Look at this.

It’s, it’s nesting it.

It’s like everything should be done right here.

Now for global stuff, everything should be done right here.

By the way, if you are watching my current, I, okay.

And for those of you who are always begging, asking, whatever, I am doing a full site build

right now.

A, not a beginner full site build, an advanced full site build.

By the way, Nick, Nick is in the comments.

Nick ours, uh, designed this.

Okay.

I’m going to go to full build agency site.

And we are 13 modules in, and I will show you right here.

Here’s the design.

If you want to see it.

Okay.

It’s an agency site.

And, um, there’s a lot like this is an animated slider.

Uh, there’s textures going on.

There’s these accent lines going on.

Uh, there’s a video carousel right in here.

That’s going to be dynamic.

Uh, there’s another background texture right here.

Uh, and I’m using all the latest features in ACS.

I’m using the icon framework.

I’m using textures and overlays, custom textures and overlays, custom box shadows, mix-ins.

I’m like, I’m doing everything from scratch, from the ground up.

And we’re doing module by module.

This is not like a one hour.

How much can I pack in?

Everything I do, like, okay, I’m going to do these cards.

That’s one video.

I’m going to do, uh, the hero section.

Okay.

That’s one or two videos.

Right.

Um, so, and I, and I’m being cognizant of time and try to give, it’s going to bleed into

another video or like longer than an hour.

We go into another video.

Okay.

This is going to be a sticky section where they stack on top of each other.

Um, a lot of really like this border situation right here.

These borders are not as they seem.

Okay.

You can’t do this with the border property.

You can’t do this.

This takes some advanced CSS, a little bit of engineering here.

Got fade outs in here.

This is going to be tabs, vertical tabs right here.

Uh, it’s going to be, uh, an accordion pricing table.

I did.

I just did this one where we did auto counting cards and we did real cutouts.

Okay.

So like right here, most people to do this, they would make the background color of this

number match the background color of this section.

If they were even more intelligent, if they were a tier, right?

Or is it a, yeah, a, yeah.

If they were a tier, they would link those with a variable.

Like when my background color changes, maybe this changes, or I change it here and it’s

going to automatically change here.

Or a tier might be using the has selector to say, okay, if it has the numbered cards, let’s

change the background color of those.

When the background color token of the background, that would be a tier.

I went S tier.

I always try to go S tier.

You, you gotta, you try to live S tier.

S tier is how the hell do you do a real cutout?

How do you really, it’s hard to see.

And let’s turn this shit off.

Turn it.

Okay.

You see how it’s cut out of the border.

That’s, I did a real cutout, a real cutout.

And you can’t just, you might think, oh, we used to use a mask on your pseudo element.

Nope.

No, that you can’t do that.

Can’t, that doesn’t work.

Okay.

You have to use three linear gradient masks to do this.

I show exactly how, how I approached it to do a real cutout where now this card can be

used on any background, any pattern.

And you don’t have to manage the background color because there is no background color

because it’s a real cutout.

Right.

So I showed how to do that.

So we’re doing, this is currently ongoing in the inner circle.

If you’re not like, if you’re a Kevin, Kevin, Kevin, have you ever done, have you ever

done a full site build?

When’s your latest full site?

I really want to see a full site build.

If that’s you, this is, this is like kid in a candy store right now.

This is like Christmas morning inside the inner circle right now.

There are just modules popping out.

People can’t even keep up with the damn modules.

You know, I, this is why I tell people all the time.

And I actually, I ping Mark and I was like, I was like, I’m a rant to you real quick.

Mark, I actually, I’m just going to show you behind the scenes of why I rant about this

stuff.

Right.

Fuck it.

Let’s, I’ll just show you this.

Like here’s, I’ll show you the proof.

Proof is in the pudding.

Okay.

AA01, Figma file review and basic architecture setup.

117 likes, 60 comments.

People are like, this is going to be the best series ever.

This is going to be so fantastic.

Kevin, I just can’t wait to get all this.

And then let’s just scroll down.

Okay.

They can’t keep up with me.

AA13 custom fonts, 17 likes, five comments.

There’s people still way back here trying to keep up.

Okay.

I told him, I told him, I was like, you know, there’s a reason, there’s a reason I don’t

normally do full site builds.

Cause only, only a small percentage of people have what it takes.

Okay.

To even watch this amount of content.

Okay.

Like it’s, it’s a, now you want something specific.

You can go dive in.

You can find it now because it’s all super organized.

Like I did the FAQs, talking points, process section, hero and scroll slider, custom font.

Okay.

So it’s all nice and easy to find that one that you’re interested in.

Right.

But only, only very few, only the highest, highest level.

No, I’m just kidding.

It’s usually the people with the most time on their hands, uh, can, can instantly keep up.

Everybody else kind of has to dodge real work and all that kind of stuff.

I get it.

That’s why I’m doing the, uh, I’m just, I’m kind of just poking fun here.

Uh, but it’s why I did this like modular format where I’m explicitly telling you what we’re

doing in this video, which means, you know, one video might be an hour.

Another video might be four minutes.

The, the damn custom fonts videos, four minutes long.

So it was very easy for you to just kind of dive in where you, where you want to dive in.

Right.

Um, now that’s not the only thing going on in the inner circle right now.

You know what else is going on in the inner circle?

That’s mad valuable CSS live.

So I’m doing every two weeks.

I do a live stream where we get on.

Now these are a little bit longer form.

Okay.

You invest like 90 minutes, two hours, kind of like a WDD live situation.

And we’re going step-by-step through like real world trenches, not like baby you like, okay,

open your textbook to page four.

We’re going to talk about the history of CSS.

That’s not what we’re, we’re like, go into the deep end.

Here’s how you select shit.

Here’s everything in plain language.

Like let me, let me make it make sense in your brain.

CSS trainings.

Okay.

And we’ve got, we’re three episodes deep.

We started with selectors and selecting elements.

Then we did selectors part two, which is advanced selecting.

Then we got into real world styling basics.

And then we’re going to do another basics.

Uh, I think it’s next week will be the next one.

And then two weeks after that, we’ll go into advanced.

It’s not going to be a long series.

Okay.

It is a throw your ass into the deep end.

And I said that the, um, I said that the premise of this was most people’s getting stuck

with CSS is in the early stages where they’re kind of afraid of it.

And they’re also trying to avoid it as much as possible.

Okay.

So my challenge to this group, the people doing CSS live is write all your CSS and custom CSS

going forward.

It’s kind of like learning to type on a keyboard that if you are like, I am going to learn how

to type on the keyboard, Kevin.

And then for the next four weeks, you allow yourself to stare at the keys as you type on the

keyboard.

That’s person a person B says, Kevin, I’m, I’m, I’m going to, um, I’m going to learn how

to type.

What would you recommend?

I would say, okay, number one thing, do not allow, put a blindfold on, do not allow yourself

to look at the keyboard and learn how to type.

Okay.

They will learn way faster, way faster.

And so that’s kind of what we’re doing here.

Quit using the inputs in the builder, by the way, it’s not a good workflow.

It’s a slower.

It put it, it, uh, spreads your CSS out all over the place.

You can’t find it half the time.

Put all your CSS in one place.

Okay.

And force yourself to write it.

And you will be very slow for the first few weeks.

You will be very slow.

Uh, and then you will just, you will be so confident at it after that, that you will, you will completely

expedite your learning and you will be, uh, you know, black belt level CSS in not too long.

Okay.

All right.

Let’s go back to, uh, let’s see.

You did all those videos on the weekend.

I was smoking a cigar.

Now I get up to date.

No, I didn’t.

I, I, I’ve just been like every day is like one or two more modules pop out.

I really love the format because I’m busy and I’ll get like a free 45 minutes.

I’m like, I think I can cram the section into 45 minutes.

And so I’ll record it, do it, publish it, release it.

Sometimes I’m like, I got 10 minutes.

I’m like, okay, I can do the fonts.

I can do the fonts in 10 minutes.

Let me do the fonts.

And I’ll put that video out.

Very easy for me to do it this way.

Very easy for you guys to consume it this way.

I think it’s a winning format.

So that’s good.

All right.

And yeah, this is on top of all the business advice, pricing, advice, pricing.

I give you my whole pricing table.

Uh, the sales call trainings, the, uh, how to put an SOW together, how, how to put a proposal

together, uh, how to get clients.

Yeah.

I mean, come on, come on.

Okay.

Uh, let’s see.

Got to get back to questions.

Hashtag Q.

Okay.

Cause by my watch, you know, we’re trying to be disciplined with our time by my watch.

We got three minutes.

So I’m just going to get, get to as many of these as I can.

Will etch components have a similar look to what webflow provides or better?

Uh, I need to go spend some time with web flows components.

I know they’re super powerful.

I don’t know what the UX is like.

Uh, so I’ll spend some time with them, but I mean, with everything that we’re doing, we’re

like UX to us is, is one of the most important things.

I told the team the other day on the call, I said, it doesn’t matter how good it like

the functionality, how technical, how, Oh my God, look at the, like, if, if they can’t

use it, it might as well not exist.

Okay.

If like, if they can’t, if they don’t feel like it’s easy and lightweight to use and like

simple to understand and wrap their brain around, then they’re there.

It’s might as well not exist.

So we’re putting tremendous focus on UX.

We’ve got two people folk heavily focused on UX.

Okay.

Uh, Tommy and Jeremy.

So we, we’ve, we, we’ve got that part covered.

We’re, we’re working heavily on UX.

Teach us how to use the inverted radius framework.

I will be doing a video on the ACSS channel for inverted radius framework.

Also look out for when 3.3 comes out, I’ll do an ACSS live.

We’ll take a look at kind of all the new, all the new stuff.

Okay.

Uh, is this the processed style sheet fully minimized?

We’ve had internal discussions, um, about doing that.

Like you can do it on your own at any time.

Like you could, you get any, any, uh, you know, performance tool, uh, most caching tools,

most server tools are allow you to do minification.

So it’s not that it’s like, you know, a difficult thing to do.

Some people want us to minimize it for, uh, for them.

Okay.

So yeah, we’re, we’ve talked about doing that.

So we’ll see.

Do you expect edge to be compatible with WP all import WP all export, or will there be

another good way to export import in bulk?

Um, we haven’t talked about that yet.

I I’m fairly certain.

I mean, everything that we’re doing with edge so far, like when we do custom fields, custom

post types, that’s all like native WordPress.

WordPress just doesn’t provide a UI for it.

All, all ACF does is provide a UI and conditional logic for WordPress is native custom field and

custom post type functionality.

Right?

So that’s what edge is going to do.

So when a tool like WP all export theoretically looks at, okay, what custom post types are

available?

What custom fields are available?

What have been registered in WordPress?

Edge registers them.

Uh, it’s going to find those and it should be able to export them.

I would think.

So maybe there’s some, you know, uniqueness in there somewhere that we have to look at.

Uh, but you know, that’s up to us communicating with the WP all import team.

Uh, and then it would also maybe be us, uh, building our own custom export tool.

We do want exporting to be like, cause data liberation is a big part of edge, right?

That’s why it liberates your data into the block editor.

For example, using all native blocks, no proprietary blocks has been like a fundamental rule.

Or what we’ve said is if for some reason we need to provide a proprietary block, those will be a separate plugin that is free.

And that would be into everybody, every install.

Okay.

Um, but we have not found a need for any proprietary blocks yet.

Um, okay.

That’s it.

I mean, we’re, we’re up time.

We’re trying to be disciplined to our time.

90 minutes in the books.

I’ll be back in two weeks for another WDD live right here.

Same time, same day, same place.

I love you guys.

I appreciate your support.

I hope you’re excited about everything that we’re working on.

Uh, go to hwp.com.

If you are not, if you are not a license holder, round two is coming in March of 2025.

You will be able to see it.

You will be able to touch it and feel it and smell it.

Maybe not that, um, in March, 2025, you don’t want to miss this one.

It’ll, it’ll be another six months of winter.

Okay.

If you, if you miss this one.

So, uh, this, there is no doubt in my mind, like this, this will be, uh, the, the go-to visual builder environment inside of WordPress.

Uh, most likely for a very long time to come because of the premise that it’s built on because of the team that’s behind it, because of everything that we’re doing with it.

Uh, we know what people need.

We know that you have been forgotten for way too long now.

And, um, that, that era is ending.

That era is ending and everybody’s going to love this era.