EXPERIMENT! Can AI Create This Simple Animated Flip Button and Take My Job?

Okay, let’s do something a little different today.

Let’s play a game.

Let’s have some fun.

I keep seeing all these people online telling me

how awesome AI coding is

and how this is gonna empower anybody

to build any sort of application that they might dream up.

And just, can you believe how amazing this revolution is?

I put this thread right here on Twitter.

I’m gonna link to it down below in the description.

I highly, highly recommend you read this thread.

It’s not too long.

It’s gonna take you 60 seconds, okay, to read this thread.

And it’s important because towards the end of it,

I share a very, very critical conclusion, okay?

And I love this new show on Apple TV.

Well, it’s not new.

It’s in season two now called Severance.

And there’s a little nod to your innie

because your innie is going to be a permanent outie

if you don’t understand exactly what I’m saying in this thread

because AI is going to replace a lot of you.

Not all of you, not me, not some of you,

but it’s gonna replace a lot of you.

And this thread shows who that’s gonna be.

Who’s gonna get replaced?

Who’s not gonna get replaced?

That’s in this thread right here.

I’m gonna link to it in the description.

I highly recommend you read it.

Take 60 seconds out of your day and read this thread.

Now, let’s play our game.

Let’s go investigate how AI can assist us.

And we’re not gonna build an app.

We’re not gonna, we’re gonna do something fairly simple.

And I think what might happen as we do this

is it’s going to reveal a lot of what I talk about in this thread.

And it’s going to reveal a lot of the major limitations.

Now, the way that we’re gonna do this, okay?

I’m gonna hop over to my boy Claude here, okay?

Claude’s gonna help us.

And I’ve got a code pen right here.

And it’s a blank slate.

What we’re gonna try to do,

there’s this concept of like a flip button.

They’re really popular at the moment.

It’s a button where like,

you know, you have a button label typically.

When you hover over the button, the label flips, okay?

It rotates to the same label.

The same label shows up.

I mean, you could theoretically make it say something different.

In fact, if you, yeah, you could.

It could definitely support that.

But, and then when you unhover, it flips back.

It rotates back to its original label.

We’re just gonna see if Claude can help us do that.

It’s like a fairly basic, fairly simple task.

Can Claude get it done?

And what does the process of getting that done look like?

Well, I mean, let’s go ahead and get started.

Okay, we’re gonna dive right into this.

Hopefully it doesn’t take too long

because I’ve got a call in like 30 minutes, okay?

We don’t have much time.

We gotta see what we can get done here, okay?

All right, so I’m gonna say, okay,

how can Claude help you today?

I would like to create a button where the,

and by the way, we are, we’re,

I want you to do this from the perspective of the like,

anybody can do it.

The lay person.

You’re a lay,

let’s all pretend to be kind of like lay people right now, okay?

Just let’s go at it from that perspective.

I would like to create a button where the label switches or animates when I hover over the button.

Can you help?

Okay, let’s just see, let’s just see where we start.

Okay, it’s thinking, it’s generating.

Hmm.

Hmm.

That looks quite complicated.

I didn’t,

I didn’t want to use React.

The button in using Tailwind’s transition utility is a React state.

The text movie scales between click me and let’s go.

You can customize the text colors and,

well, that doesn’t even work.

I didn’t want to, I don’t, I don’t,

if I’m a lay person, I mean, what,

do they even know what Tailwind is?

Do they know what React is?

Okay.

I, I just want to use HTML and CSS.

Hmm.

Hmm.

Okay.

I mean, let’s, let’s get started with this.

Okay.

Let’s hop over.

We’re going to put this into the HTML box.

We’re going to take,

I think the lay people would copy the style tags.

I know that we don’t need them,

but that might be another area where they get tripped up.

Okay.

Let’s go ahead and paste that in here.

Okay.

Yeah.

That doesn’t work.

Okay.

Also,

I know this technique is not the best technique.

This is not a good technique.

This is not,

this is,

first of all,

it’s a button.

It’s,

it needs to be a link.

It doesn’t even have a URL.

Okay.

These are all things that we’re going to need to address with our boy,

Claude.

But this technique,

I see a lot of people use this technique.

This is not the best technique.

This is not the technique I would recommend.

I wouldn’t,

especially if you’re doing a situation where you’re just trying to animate it.

Now you’ve got double,

like,

how is this going to work with accessibility?

Is it going to read the same thing twice?

Is it what,

what’s going to happen?

Right.

You’ve got a lot going on here.

Plus,

if you’re in a page builder environment,

this is a disaster.

I mean,

no page builder supports this.

Okay.

I would want something that actually works inside of a page builder.

So first things first,

I mean,

we got to figure out which,

which,

which problem are we going to address first with,

with Claude?

So let’s,

let’s just say,

okay.

Um,

the,

the,

the,

the button doesn’t take me anywhere when I click on it.

Let’s just try that.

Let’s just,

let’s just go.

Remember,

we’re,

we’re trying to be as lay person as possible.

Okay.

All right.

Here’s the button with a link.

So it switched it over to a link.

So I’m going to,

I’m going to grab this new code and we will,

we will pop that in.

Okay.

All right.

Fantastic.

Um,

I’m going to tell Claude that I can only see,

uh,

two thirds of my button.

It doesn’t even understand the context of this,

but let’s,

let’s just see what happens.

I can only,

why,

why can I only see two thirds of my button on the canvas?

The issue is likely because the absolute positioning of the hover text is causing overflow.

Let’s suggest that’s not it that it has.

No,

that’s not it.

That has nothing to do with it.

That has nothing to do with the problem we’re facing.

Um,

save.

Okay.

All right.

It’s,

it’s,

how did it approach fixing this?

Hover button,

uh,

position relative,

uh,

transition,

hover button,

hover,

hover button,

span,

hover button,

hover,

well,

hover button,

span class,

hover,

span.

It’s put classes.

It’s put classes on my spans.

Now it’s got a span,

span class of default and a span class of hover.

It just made this way more complex.

Um,

that,

that wasn’t necessary to do that.

Hover button,

position relative.

I don’t know why the position relative was necessary.

Um,

text decoration,

none,

border radius,

eight pixels,

background color,

min height,

48 pixels.

It just put a margin around the button.

That’s all it did.

It just threw a 20 pixel margin around the button.

I didn’t want that.

Hold on.

Uh,

I,

I don’t think a margin around the button is the right way to go.

I mean,

I,

first of all,

I had to assess that.

Like,

is a beginner really going to assess that?

No,

the beginner is going to have now a button with 20 pixels of margin all around it.

This is,

this is all,

we’re already off the rails.

We are asking this to do a very simple thing and we are completely off the rails.

Okay.

What did it do now?

Uh,

it’s using magic numbers,

by the way,

for padding.

Um,

I don’t,

I don’t know that a min height is even required here.

Like,

what,

what was wrong with that?

Why did we have to go with a min height?

That didn’t,

that doesn’t make any sense.

Raw dogging the hex codes.

Okay.

No tokenization whatsoever.

No frameworking whatsoever.

Scalability,

maintainability out the window.

Um,

display in line flex.

Okay.

Uh,

all right.

We’re gonna have to address the spans issue.

I’m not sure it’s best to use two spans because when the labels need to be the same,

I know the solution.

Okay.

It’s using a data attribute.

I don’t know if Claude’s ever going to come up with that solution,

but we’re going to find out.

I’m not sure it’s best to use two spans because when the labels need to be the same,

the text is just repeated or do,

we’ll say the text is duplicated,

duplicated.

Um,

I mean,

they,

they can’t ask about accessibility because they don’t even know about accessibility.

Right.

Uh,

I’m not sure it’s best to use two spans because when the labels need to be the same,

the text is duplicated.

Let’s just see what Claude has to say about this.

Here’s a simpler version using CSS transform.

Uh,

okay.

All right.

It got rid of the spans.

Let’s see what this is going to come up with here.

Uh,

so let’s get some new,

let’s get the new CSS in here.

Okay.

Oh,

come on,

Claude.

Let me have it.

Let me have my CSS.

Okay.

Let’s go in.

Let’s just paste in.

Okay.

Oh dear.

Oh dear.

What are we,

what are we doing here?

I,

I mean,

I already could tell by the HTML that this was hopeless.

Um,

uh,

yeah.

Okay.

When I hover,

the button gets bigger,

but I lose the label.

All right.

See how it addresses this.

It’s,

it’s kept the same structure.

This is a,

I’ll tell you right now,

this is a failed structure for what we are trying to do.

Um,

I forgot to wrap the text in a span.

Here’s the corrected version.

Oh,

okay.

They gave a corrected version.

This is slightly closer to what you might need.

I mean,

it’s definitely more promising than the version they gave us a second ago.

Uh,

but again,

nobody else.

It’s also missing the closing style tag.

Um,

which,

you know,

we don’t need anyway,

but still.

Okay.

Let’s swap that in.

Okay.

Um,

I didn’t ask the button to get bigger.

And what is it,

what is it actually doing here?

So the span.

Okay.

It’s using a hover button,

hover background.

It’s scaling it.

We didn’t,

we didn’t ask it to scale it.

Hover button after content.

Let’s go.

Oh no,

Claude,

you can’t do this.

Claude,

you can’t put static content in,

in,

on a class.

We’re,

we’re limited.

Every button has to say,

let’s go.

Now that that’s,

that’s,

this is not going to provide a instance level,

um,

differentiation of your labels.

Uh,

now every,

okay,

two things.

One,

I didn’t ask for the button to get bigger.

On hover.

Two,

I’m just going to say what,

what a beginner,

see,

a beginner would go use this now.

Uh,

and then they would realize,

oh,

all my buttons say,

let’s go.

All my buttons say,

let’s go.

On hover,

I need to be able to change the labels on a per button basis.

Guys,

we are,

we are trying to accomplish a very simple task right now.

This is a very simple,

oh,

what,

what has happened?

Okay.

It gave me,

it gave,

sorry,

it gave me,

it gave me two versions to demonstrate how this would work.

Okay.

So HR,

class hover button,

data hover text.

Let’s go.

Oh,

we’re on.

Okay.

It’s actually,

it’s onto something here.

It’s onto something here.

Okay.

Let’s,

let’s go down.

Let’s grab the CSS that it gave us.

And let’s pop that in.

And now we have two buttons and they do change.

Okay.

This is not the effect I had in my,

in mind though.

Okay.

Okay.

That’s better.

However,

there,

they need to have a swapping effect,

not just a fade.

let’s try that.

Let’s try that.

I don’t know.

How,

how would a lay person describe these problems?

I’m probably doing a little bit better than they would.

Honestly,

I think I’m very tempted to bring my,

my,

my 12 year old daughter down here and,

and have her do the same exact task.

I mean,

first of all,

they wouldn’t even know like that first code that was given.

They,

they would be where,

where do I even put that?

How does that even work?

Okay.

That’s okay.

So they gave me,

gave me new.

I don’t think we need new HTML.

We would just need new CSS for this.

Let’s pop that in.

Oh,

Claude.

Okay.

Maybe,

maybe they did change something in the HTML.

We’ll just replace the HTML just in case.

I’m not going to take the time to actually analyze it.

Now they didn’t change anything in the HTML.

Okay.

Claude.

I can,

I can,

I can see both labels at the same time now.

Okay.

By the way,

I could have watched a video tutorial on YouTube,

like at a great channel,

like Geary dot,

like Geary co like at Geary co.

That’s the one you’re watching right now.

And we probably would have been done already.

Add proper centering,

fixed text overlap with left 50%.

And we’re going to,

we’re going to analyze this more in just a minute.

If we,

if we have ever arrive at an actual,

actual solution.

Okay.

I still see now.

No,

I still see both labels.

At all times.

Let’s see.

Let’s see what it,

let’s see what it thinks about this.

All right.

Let’s grab the new,

the new CSS.

Let’s bring that in.

Okay.

Okay.

We’re getting,

we’re getting closer.

We’re getting closer.

Um,

great.

This is the hover effect I wanted,

but the original label doesn’t ever leave the button.

All right.

All right.

All right.

Let’s see.

Oh,

added background inherit to the pseudo element to hide the original text.

Oh my gosh.

They make it so hard sometimes to just copy.

All right.

Let’s bring this in.

Paste.

There we are.

That’s better.

All right.

Now we have to decide.

Ah,

it’s,

it’s a little,

it needs,

it needs a little fade as well.

It looks a little,

uh,

abrupt.

Let’s see if that,

let’s see if that helps get us to where we want to go.

All right.

Let’s bring this in.

Uh,

yeah,

it’s not great.

Um,

I’m,

I’m seeing the background color transition in,

and that’s not the effect I was going for.

Hmm.

All right.

Let’s,

let’s see what we got.

I don’t want to take too much more time because you guys are probably getting bored now.

Okay.

Now the background color is not transitioning at all.

Like it’s not like,

I want the backgrounds color to change on hover.

I just don’t want it to slide in like the text.

seems like a good description of our problem.

Okay.

Let’s grab all of this.

Paste in.

See what we get.

That’s better.

That’s better.

Okay.

We might go with something like that now.

All right.

Let’s go ahead and take a look at,

um,

what’s going on here.

All right.

So obviously padding values,

we would not want to use these values.

Um,

we would want to tokenize everything.

Um,

you know,

we could probably ask Claude,

uh,

can you tokenize the values that are important to tokenize?

Let’s just see what it comes up with here.

Okay.

So we got a little bit,

we got a little bit of tokenization here.

Um,

not nearly what we would expect to see,

uh,

or what we would want to see.

So like button BG is good.

Button hover really should be button BG hover.

If like,

you’re going to keep naming conventions,

you know,

decent.

It,

it has not tokenized the actual color.

It’s you’re still raw dogging the hex codes here.

Um,

padding X doesn’t seem to apply it.

Like,

shouldn’t it be button padding X and button padding Y?

Shouldn’t it be those,

those things,

right?

Shouldn’t it be button min height?

Shouldn’t it be button transition duration or something?

Um,

you know,

so there’s,

there’s definite problems here with how it’s decided to tokenize.

And then it didn’t tokenize certain things.

Um,

transition duration,

fade duration.

Um,

like the ease,

why wasn’t the ease?

that might be something people would want to change.

Um,

okay.

But in any case,

like it’s just another example.

Uh,

let’s see border border,

none.

Okay.

Border radius,

eight pixels,

magic number,

um,

color white,

not tokenized.

Why wasn’t the button color thought to be tokenized?

Right.

Um,

cursor pointers,

unnecessary.

I mean,

the minute you,

like I can remove that,

it’s still going to be a pointer cursor.

That was unnecessary.

a display inline flex at line items,

center,

justify center overflow hidden.

I don’t,

uh,

maybe because of the transform,

they have to hide the overflow.

Doesn’t seem like it.

It’s never going to go outside of the bounds of the button.

I don’t,

I don’t know that that’s the problem with overflow hidden is it’s going to cause

other,

other issues with styling down the line.

If we wanted to do certain things.

Um,

so like that would be something that you would not want unless it’s absolutely

necessary.

It actually is absolutely necessary here.

Why in the world is there an entire blue box transitioning in?

Hover button,

hover,

hover,

hover button.

Okay.

Uh,

after,

um,

position,

absolute transform.

Mm.

Mm.

Mm.

Mm.

Mm.

Mm.

Mm.

With a hundred percent.

Okay.

Background,

background inherit.

That’s what’s going on.

It’s inheriting,

the background color.

This is a mess.

None of this stuff was necessary.

So much of this is unnecessary stuff.

It’s an absolute mess.

Uh,

button hover after transform opacity one.

Okay.

Um,

yeah.

And then now our padding.

Okay.

Let’s do the overflow again,

but look at it.

There’s another kind of issue here.

Um,

let’s go with,

what,

what did we,

oh,

overflow hidden,

uh,

overflow.

Probably get away with overflow clip might be better to use than hidden.

Um,

but look at the padding now is not correct.

So that’s another error that we would need to account for.

It’s like a edge case that we would need to account for.

It would not happen if you use exact same text,

obviously.

Um,

so we just changed this to submit and there it goes.

It updates.

So then you’re not going to have a padding issue.

Um,

but if you are going to use different labels,

that is going to be an edge case that you have to solve for that Claude did not realize would,

would even exist.

And so you have to be able to debug these things and then relay that information,

uh,

back to the agent.

So,

yeah,

I mean,

we’ve got a lot of unnecessary code.

We got a lot of stuff that’s not tokenized.

We’re,

we’re,

we’re working outside the bounds of any like logical framework here.

Um,

and you know,

we did arrive.

Ultimately,

I wanted to get to the data attribute methodology for creating this,

this flip button as we’re calling it.

And it did actually arrive there.

But again,

I’m very curious.

I,

I can’t pretend to be a lay person when I’m not like I’m able to analyze exactly what’s

going.

This would be absolute gibberish to an actual lay person.

And the,

I want to actually watch them.

I think I’m going to do that.

I think I’m going to do that.

I’m going to,

I’m going to bring,

I’m going to bring my daughter down.

Maybe I’ll bring my daughter down and just say,

Hey,

you need to create a flip button.

I’m going to,

I’m going to show one to you.

I’m going to show one.

So at least she has a vision in her mind,

what she wants it to do.

Let me know.

Drop a comment below.

Let me know if that’s something you want to see.

Do you want to see a lay,

a real lay person?

Okay.

She’s,

she’s only 12,

but she’s intelligent.

She’s intelligent.

Okay.

Um,

do you want to see it?

Drop a comment below.

In the meantime,

I think I proved my point.

Go read this thread.

Go read this thread.

There is a link below.

Go read.

It’s so important for your any.

Okay.

It’s so important for your Audi.

Right.

If you want both of them to be happy,

shout out,

shout out to,

uh,

severance.

If you’re not watching severance,

you absolutely got to watch severance.

Apple TV,

fantastic show.

Um,

they’re doing a great job with it.

There’s so many hidden gems in this thing.

It’s crazy.

You can analyze it all day.

Uh,

it’s very fun.

It’s,

it’s,

it’s,

it’s,

it’s good entertainment.

Okay.

Uh,

that’s,

that’s going to be it for this video.

I just wanted to have some fun,

do something a little bit different.

If you like this content,

let me know,

uh,

drop a like,

drop a comment.

I’ll be back very soon.

Peace.