Ep 3: Cleaner Country Cards

0:09Hello and welcome to episode three of

0:09Curiosity Builds. My name is Trevan and

0:11we are going to try to build something

0:13with AI. And we're going to do it

0:15intentionally, curiously, preserving

0:17critical thinking and allowing our

0:20motivation and thought process to drive

0:24what we create, but using these amazing

0:27AI tools and techn that are being

0:30developed and improved upon as we speak

0:35and seeing what they can do and what

0:36they can do in the hands of somebody who

0:39doesn't know coding, doesn't have a deep

0:43history with the tech industry at all,

0:45but is very curious, very interested in

0:48AI and what it can do, is very worried

0:50about what we're outsourcing when we do

0:53uh things with AI and very uh

0:57concerned about the impact it's going to

0:59have on society if we don't get in front

1:01of it with an intentional focus allowing

1:04uh you know our ability to articulate

1:08what we want with curiosity and

1:11intention to drive what we want to make.

1:13So you'll see me prompting and figuring

1:16out what I'm doing and making lots of

1:18mistakes and trying to create something.

1:21Uh the last couple of episodes we worked

1:22on my website which is right here. This

1:25is BorderlessWire. The goal of this is

1:27is BorderlessWire. The goal of this is

1:27you should be able to click into a

1:29country and then get a little bit about

1:31the country from Wikipedia like it is

1:33right now and some news sources that are

1:36from that country specifically and

1:38translate it into the language that you

1:40can read. That's a lot and we have to

1:42investigate uh a lot of things that go

1:44into that. Not just how to create it,

1:46but how to make it work um legally,

1:50which is fun. I'm really curious if we

1:52can do that. But right now, that's a

1:55lot. So, we're just going to do one

1:57thing, which is clean this up over here

1:59a little bit on this side. So, this is

2:01definitely not what we want it to look

2:02like in the end state. This is just the

2:05scaffolding. Uh, right now it's got the

2:08about, it's got news, which has nothing,

2:09but it's very unclear that you can click

2:12this. It doesn't look very nice. This

2:14whole thing doesn't look very nice. So,

2:15we're just going to try to do a little

2:16bit of a facelift. U we'll try to get

2:19started over here. I'm going to keep a

2:22preview of the build if I can get it up

2:25here. Uh, open should be open browser

2:28here.

2:30Many ways to do it. And then we can put

2:31the local preview. So, here's the

2:33BorderlessWire. I could put the website

2:34BorderlessWire. I could put the website

2:34in there, but we want to see what we're

2:35actually doing. So, I've got it already

2:37launched here on localhost. It's not

2:38launched here on localhost. It's not

2:38quite as crisp, but this will allow us

2:41to see kind of in real time the changes

2:44that we're making or trying to make. So,

2:46we're going to go there and pull it up.

2:48Hooray. Here it is. But I kind of want

2:51it to be its own. I want to just split

2:53this. Actually, I think I can do that

2:56there. I can do that there. And that way

2:59I can move this here. So, anybody who's

3:02popping in or wants to look at something

3:04to read while I do this, they've got it

3:07because there is a little bit of waiting

3:09that goes on sometimes. So, I'm in

3:11cursor. This is a terminal. This is the

3:14preview of what we're trying to work on

3:15here. And this is basically chatgpt

3:18sitting over here on the side. agent.

3:20I'm going to put it into planning mode

3:21so it will think about what it's doing

3:24before it doesn't and we can read it and

3:26think about uh what it's doing before it

3:29doesn't and it can ask us some questions

3:31if it does has them. So I want to get

3:34the thing is on this on this preview how

3:38do you scroll over I don't even know how

3:40to scroll over there to see that side of

3:41the uh website

3:45and do you even see that when the card

3:46pulls up? You don't

3:50I wonder all the way over there. Look at

3:53that. Okay. Well, we've done it kind of

3:57little bit. I don't know about this, but

4:00you know, we could shrink it down. I've

4:01got something here. Hello. Hello. Okay.

4:05Now, terminal prompting GPT 5.2 Codex.

4:10I use speak because it is how I like to

4:13talk. Talking naturally to these LLMS uh

4:16works for me. And

4:19You know, you do you. Don't get uh don't

4:22get too worked up over prompting

4:23perfectly. Uh but do get worked up over

4:26how you prompt and what you say and try

4:28to get better at it. Learn from what

4:29you're doing. Um it is not very good at

4:34intuiting uh complex feelings, thoughts,

4:38emotions, wants or needs. So you need to

4:40be prescriptive and descriptive. And

4:42don't be lazy. Sometimes you might want

4:45to find something, you're not doing the

4:47best job articulating it, and it gives

4:49you kind of what you're looking for, but

4:51not quite, and you settle. Come on.

4:54You're you're training it, and you're

4:56training yourself. So, try to articulate

4:59as best you can. That being said, watch

5:02me do some really horrible uh speaking

5:05to this thing and failing over and over

5:07again, but we'll try.

5:10I want to get the card feature on the

5:13side of the BorderlessWire website that

5:15side of the BorderlessWire website that

5:16shows the country profile to look nicer.

5:19Right now, it's very rudimentary and

5:22basic. The whole UX design is is pretty

5:26flat. The first thing I want to try to

5:28do is make it more clear that the about

5:32and the news are clickable. And when you

5:35do that, you're going to uh open up this

5:38kind of accordion dropdown of the

5:40different information. I want to The

5:44buttons look more modern, maybe rounded,

5:47not so harsh and boxy,

5:49but they also need to have kind of a

5:54dynamic

5:56popup or pull out when you're hovering

5:59above them. Just subtle so you know that

6:00they're clickable. Additionally, I think

6:04making them smaller or centering the

6:05text would look better.

6:08I don't know if about or news is exactly

6:11what I wanted to say either. Let me

6:14pause for a second there. Um,

6:18so

6:20yeah, I think

6:22because from Wikipedia, I wonder what

6:24it's bringing up.

6:27That's something to be investigated. So,

6:31for now, I think we're going to have it

6:33called

6:35Let's Change

6:37about to say

6:44quick facts.

6:44And then

6:50the open Wikipedia at the bottom needs

6:50to be in a similar style to the buttons

6:54above.

6:56I also don't know why we're splitting

7:00the card

7:03in half on the side of the page. It

7:06should just be able to extend down as

7:08far as it needs to.

7:16All right, we'll see what plan it does.

7:16So, I'm going to push that in there and

7:18it's going to plan away. And then while

7:20it's thinking, it will give us some

7:23information here that we can take a look

7:25at. Uh eventually it'll throw a plan out

7:28that we can see and then uh agree with

7:30or disagree, give it feedback on. So

7:33we'll let it do its thing here. Um

7:37and see what it comes up with.

7:40Planning the next moves.

7:42So it's asking questions already. I

7:44couldn't find the BorderlessWire uh

7:46couldn't find the BorderlessWire uh

7:46country profile card in this repo. Where

7:47is the BorderlessWire website?

7:49is the BorderlessWire website?

7:49and what route file holds the country

7:52profile card. It's in this repo, but I'm

7:54not sure where for sure.

7:58Uh, for the button labels, do you want

8:00to rename about to quickfax or also

8:03rename news? And if so, to what? Uh,

8:09no.

8:19I hope it's in this repo. We'll see. We

8:19will probably have to switch over to our

8:21pal flawed if it's having trouble

8:24locating this. I worked today to try to

8:26get this solved and set up with Daniel

8:29because I I I not sure what happened.

8:32I'm sure it's something I did to mess it

8:34up. Um, but just getting the correct

8:38uh repo files on my computer so what I'm

8:42doing matches what's been pushed. So

8:44when I make a change here, it makes the

8:46change here and all the other changes

8:49stay and you know there's a lot of

8:51sequencing that you need to understand

8:53it's not just letting AI do everything

8:55for you and even if it is doing

8:57everything for you you need to

8:58understand what it's doing at some level

9:01so that way you can do your own QA and

9:03you don't get caught up um you don't get

9:06caught with your pants down looking

9:09foolish because you let something get

9:11created in your name that you didn't

9:14have full uh look at. Okay, there we go.

9:17opening up extending a little longer on

9:20this one. Maybe it is more dynamic than

9:22I thought. Uh, what route URL shows the

9:24country by file?

9:27I provide the right URL. Not sure. Can

9:29you search by clue?

9:33Yeah, I wonder. We could go look in the

9:36files, but I'm just not sure.

9:49Maybe this is even called the country

9:49card.

9:51Could be called something else.

9:58Could be called something else. One way

9:58we can investigate what this is is we

10:00can go over to the actual website and I

10:03can left click and inspect.

10:07And look, there's the actual code. It's

10:08the guts of the website. I didn't know

10:11this until someone showed me this

10:12recently. And even now, I'm not 100%

10:15sure what 95%

10:19of this does. So, we'll be, you know,

10:23probably saying things that don't make

10:24sense to anybody, but

10:28we can look at what this highlights and

10:31see what it's kind of called.

10:35And this can help us perhaps give clues.

10:38And I am just this is my own

10:42investigation, right? I'm not 100% sure

10:45that this is what we want to do. But I

10:48think what I'll do is have it

10:50highlighted there and then I'll take a

10:52screenshot and the screenshot will

10:54capture everything including all of the

10:58code and our dear Asian over here

11:03can read it. So copy this

11:28So, I put a screenshot

11:28below that has the website open with the

11:32inspect

11:34out. Hopefully you can glean from this

11:38what that might be called. I'm not sure

11:41if this will work.

12:09You share the file component name shown

12:09in the reactive tools URL

12:16repo.

12:16Share the file component name shown in

12:18the react

12:20view dev tools.

12:23Interesting. I don't know, dear. I think

12:27we might have to CL to do this for us,

12:31but even then, I'm not sure Cloud's

12:33gonna know how to do this correctly.

12:37So, what I've got to do is look for

12:42files here on a separate screen. That's

12:46how my computer's set up.

12:49And besides, can't show you all the

12:52secrets, can

13:35Maybe it's called something else.

13:35So, you can't find anything about the

13:40country profile section of the website.

13:42Maybe it's not called a card.

13:45There's nothing you can see in the repo.

13:54the repo destination. Oh my goodness.

13:54You know what's happening? It says I'm

13:56in

13:58Hypandra. I think that could be why.

14:01Hold on. Is it that? Let's just see

14:06here.

14:26No, I'm not. You can see me fail live.

14:26So, I opened this while I was doing

14:29something. I did something else before

14:30for Hypandra and then I started to do

14:33this and I did not switch out of where I

14:37am. So, it's looking in Hypandra right

14:40now. So, I think I could probably get

14:44this to move over to my directory. I did

14:49change the directory in the terminal.

14:51Um, but I didn't change like the the

14:53repo that I was looking at. So, let me

14:55see if I can do this. So,

15:06see if we'll see if GPT can handle this.

15:06I accidentally started you in another

15:10repo. So the correct path is going to be

15:16the

15:17following.

15:19It's going to be desktop

15:21slash projects

15:24slash CV

15:27slashbuilds

15:29slashBorderlessWire.

15:38Okay,

15:38let's see if that works.

15:57there you go. Take that instead.

15:57So, we'll see if it understands that and

15:59if it is able to change over. If not,

16:02I'm just going to have to relaunch this

16:04um from the correct project. Basically

16:08what I did is I moved over to work on

16:12this. I changed the terminal directory

16:14but I didn't switch over from the

16:16Hypandra project to my BorderlessWire

16:19Hypandra project to my BorderlessWire

16:20project. So it was having trouble

16:22finding stuff I believe.

16:25Um so it's either going to look in there

16:28and read everything and we can keep

16:30working or it's going to make me switch

16:32over. It might be better to switch over

16:35just for cleanliness.

16:38Maybe Daniel's hearing that screaming

16:40right now. Yes, please do that. But I'm

16:43not sure. The laziness in me is telling

16:45me to stay here if it lets me. Right.

16:55Yeah. I think it is just going to make

16:55the plan. Nice.

17:06So yeah, sometimes I get excited. you

17:06get excited and you move around too

17:07fast. I should have switched over so I

17:09wasn't in this. Um,

17:12but now that it found everything, it

17:14knows what to do, right? It knows

17:16exactly what it's doing. Oh, and it's

17:18also putting its plan over here. That's

17:20right. So, it's telling us what it's

17:23going to do now that it's made the plan.

17:26So, review and adjust the country UI

17:28card. It found the files. Replace the

17:30tabs layout with the accordion state.

17:32Update the trigger button styling.

17:34remove the height for the scroll area so

17:36the card content can extend naturally.

17:38The slide rails visually clipping adjust

17:40the rail and then it gives the so

17:42basically this is what it's going to do

17:43how it's going to do it. So Refactor

17:46the country card in the accordion unify

17:48the modern pill button styles with the

17:50hover lift that little uh animation

17:53thing I was mentioning in the beginning

17:55and remove fixed heights confirm side

17:57not clipping. So, let's give it a go.

18:00See what happens. And we will

18:03um hopefully have some updates here.

18:07Nice. Right. So, instead of panicking, I

18:09did panic a little bit, but instead of

18:11like, oh no, I've just got to start over

18:13and maybe even film this video again.

18:17You just got to be articulate. Slow

18:19down, pause, think about what you should

18:23do. And maybe it is cancel this and

18:27restart, but maybe there's a way around

18:29it and we just found one because we were

18:32able to explain what was going on to the

18:35agent. Now, does that mean it's gonna

18:39come out perfect, wonderful right away?

18:42Maybe sometimes getting better at that

18:44getting better at making this stuff

18:45faster? Definitely helps if you start to

18:48learn keywords and phrases and things

18:52that are repetitive.

18:54Yeah. Yeah. We will allow those uh

18:57things that are repetitive. So that way

18:59when you are speaking you can arrive

19:02there quicker because instead of

19:04describing something I'm able to throw

19:07in a keyword. Maybe it's not something

19:10that's common uh you know common

19:14verbiage or something that people would

19:16understand only in the coding world but

19:18uh you pick it up if you pay attention

19:20and you uh you know apply and then that

19:24makes this even more powerful and and

19:26faster and you a better master of of AI

19:29and the things it can do and let's not

19:31forget we are building some awesome

19:34stuff and this is basically the future

19:38coding it seems, but AI does so many

19:40more things besides allow you to code.

19:43Um, that's what we're focused on here.

19:46So, it's working on it. Um,

19:49it's already, look at that. It's already

19:50rounded this so it looks better. It's

19:54showing a drop down arrow, which makes

19:56more sense. Um, yeah, we like it. Open

20:00Wikipedia makes sense a little bit, but

20:04uh, yeah, we're getting there. So,

20:05that's kind of the first First run of

20:08this um test run not requested the

20:11accordion allow only one section open no

20:13collapse or tweak it to hover. So this

20:17lets only one section be open at a time.

20:21Yeah, I think

20:33I think I want the border

20:33to

20:34not look so harsh.

20:37And I don't want it to butt up so close

20:41to the bottom of the text, especially on

20:43the news tab. So, give that a little

20:45clean up. And then also,

20:48let's add

20:51something that makes the open to

20:53Wikipedia button a little more obvious

20:56that it's a clickable link that jumps

20:59out. I like that it matches the design

21:03of the other two buttons, but it's just

21:06obvious that it's going to jump out

21:08necessarily even though it does say open

21:10Wikipedia.

21:11It's just I don't know maybe add a color

21:14behind it or something.

21:17So I was not very succinct there which

21:21is fine because you know sometimes

21:26you're thinking about it as you go. I

21:28know what I want but I might make little

21:31adjustments as we go as we learn and as

21:34we kind of

21:36explore

21:37what could be possible. And so trying to

21:40just make this look it already looks

21:41better. This already looks way better.

21:43Do you remember what it looked like

21:44before? We can go look at it what it

21:46looked like before. We've got the

21:47original site up. Let's look at Canada.

21:50Canada. Canadia. Let's look at Canada on

21:54our new thing.

21:56All right. Look at that.

21:59It's all boxy and

22:03wow. So wonderful and modern with the

22:07no corners. Anyway, I like it. Right.

22:10Uh, did this make it more clickable?

22:13It's still working on it. Looks like

22:35now has a subtle primary tint in the

22:35background. Does it though?

22:39Does it?

22:41Let's look at the local.

23:01I don't think so. I can't tell. I am

23:02color blind, but I don't think it's

23:03there. So,

23:06first of all, I don't see any color

23:08change unless it's super subtle and I'm

23:11just not seeing it. I think there's

23:13something blocking it. Additionally, I

23:16don't see the little like

23:19pull out animation or pull out effect

23:22when you hover above quickfax or news or

23:25open Wikipedia to begin with. And that

23:27was part of the original plan or should

23:29have been.

23:35Now it's gonna

23:35think about what it's done and uh make

23:39some course corrections here. That

23:41should have been enough context and this

23:42should be good enough to commit and call

23:45a call a good uh a good day for adding a

23:49feature.

23:51Little clean up on the side here.

23:54Still don't see it. Tell me which

23:55surface extension.

24:06That is true. This started out as an

24:06extension and may still be, but uh we

24:09need to make sure that we specify. It's

24:12going to have a couple of different

24:13views at least to it. It will have a

24:16couple different

24:19up here.

24:21Oh, there we go. That's already

24:24doing something.

24:36It is

24:36Wikipedia Philippines.

24:45It did do a shadow under the button, but

24:45what I want, you know what I meant is

24:47when you hover over it, it moves. So,

24:50okay.

24:52I see the shadow that you added to the

24:53back of the buttons. That's not exactly

24:55what I was going for. What I was

24:57alluding to, and should have been more

24:59specific, is when my cursor is over the

25:03top of any of the accordion or clickable

25:08buttons. I want those buttons to expand

25:11slightly to give a little actual motion

25:16so it pulls forward.

25:19Additionally,

25:21I don't like how

25:24pulled up the bottom of the box is

25:26underneath the news button.

25:36All right, let's see. Let's see

25:36what we got here.

25:52scale up. That's right. I think I did

25:52know that.

25:55We don't want to open up Wikipedia.

25:57We can

26:00There you go.

26:33I'm not really seeing any of the changes

26:33you made. I think there might be

26:36something blocking the view or it's too

26:38subtle. Do a thorough inspection before

26:41you make any changes and assumptions.

26:59All right, it's finally

26:59doing some stuff here. Deeper

27:02inspection. Look at that. That's right.

27:05Look at that. There's the things we were

27:07talking about.

27:09I was wondering like, hey, I'm being I'm

27:11pretty good at describing what I want

27:13here. And even though I didn't get the

27:15scale up thing correct,

27:17I love it. All right. Okay. Uh, refresh.

27:30It does

27:30a little bounce to the to the name, but

27:33I want it to be a little more

27:36pronounced. No, this is great. You've

27:39done a pretty good job here, but I want

27:41the scale up

27:44uh motion to be a little more

27:47pronounced. And the Wikipedia tint isn't

27:51showing up,

27:53I don't believe.

27:56Oh, it is actually. I lied.

28:05Call me a liar.

28:05We'll delete that for it.

28:15Yeah. Yeah.

28:15All right.

28:21So, we'll go ahead and commit that and

28:21then I will move on to the next feature

28:23which will be in the next video.

28:27Will be in the next video. Yeah. There

28:30we go. That bounce. There we go. I love

28:33it. Okay,

28:36this

28:45is still understand. There we go.

28:45Running through all the stuff. So now

28:47it's saving everything for

28:55yes. Yes.

28:55And we'll do a we'll walk through a pull

28:57request in the next video, I believe. So

29:00yeah, we've committed this. It's saved

29:03and I'll be moving on to the next stuff.

29:05There's some uncommitted changes from

29:07some other stuff, but to worry about

29:08that for now. Well, thanks for watching.

29:11If you've got some feedback how I could

29:13have done something better or quicker or

29:15you have a question, let me know. Have a

29:18good day and stay curious. Oh, and don't

29:20forget to come in.