1
00:00:00,000 --> 00:00:05,360
mm-hmm yep oh my gosh i'm so excited to get into this

2
00:00:06,040 --> 00:00:24,379
welcome back to type a unhinged the podcast for the architects of order and the masters of chaos

3
00:00:24,379 --> 00:00:31,599
i lost track of count i don't know if this is latte three or four oh no but it's definitely

4
00:00:31,599 --> 00:00:37,920
at least three oh i moved my server from upstairs in the closet down to behind my tv in the main

5
00:00:37,920 --> 00:00:42,039
living room because in the summer i don't want upstairs getting hot from the ai stuff

6
00:00:42,039 --> 00:00:47,879
i also got yeah it was a yeah i'm still on like cloud nine from how productive i was

7
00:00:47,879 --> 00:00:53,399
uh speaking of servers nate that was a an accidental segue into

8
00:00:54,380 --> 00:01:02,940
our topic for today vibe coding i'm so excited i i love vibe coding what is your take

9
00:01:02,940 --> 00:01:08,640
uh also love it this has been on our list for a little while and i felt like i didn't have as

10
00:01:08,640 --> 00:01:14,700
much to contribute as you until the last few months and so it was like yep that's it's going

11
00:01:14,700 --> 00:01:19,980
to the top of the list let's go yeah let's talk about it where would you say like first of all

12
00:01:19,980 --> 00:01:23,980
for our listeners if they're not sure how would you define

13
00:01:24,379 --> 00:01:33,679
vibe coding oh gosh i would define it as i should have thought of this ahead of time nate i would

14
00:01:33,679 --> 00:01:46,939
define it as uh basically a prompt interface to coding an app or a website or whatever the heck

15
00:01:46,939 --> 00:01:53,879
you want it to be uh that allows you to like not have to learn every detail about coding

16
00:01:54,379 --> 00:01:59,500
in order to actually create something at the same time i do think it is important and we'll probably

17
00:01:59,500 --> 00:02:04,939
get into this that you do understand some basics and are learning and teaching yourself those things

18
00:02:04,939 --> 00:02:12,539
as you go otherwise you can easily get stuck and be like okay i guess i can't build unless you're

19
00:02:12,539 --> 00:02:18,219
doing something so incredibly basic right um you definitely you still need to to learn and

20
00:02:18,219 --> 00:02:24,219
understand a few things the ai can generally fix the problems for you but not all the time

21
00:02:24,379 --> 00:02:31,460
yeah i think that's well put yeah like vibe coding you're using natural language to code right with

22
00:02:31,460 --> 00:02:38,859
ai's help but to me it's enabling everyone to go from syntax focused like is my semicolon or period

23
00:02:38,859 --> 00:02:43,659
in the right spot for the code to not fail to more sentiment focused what are we trying to achieve

24
00:02:43,659 --> 00:02:51,639
here what's the end goal or vibe right agreed with you i i think it's like one of the most

25
00:02:51,639 --> 00:02:52,379
coolest things to come out in the last several years i think it's like one of the coolest things

26
00:02:52,379 --> 00:02:54,359
to come out in the last several years in the last several years in the last several years in the last

27
00:02:54,379 --> 00:03:06,199
I think it's enabling pretty much everyone on the face of the earth to dabble in tech that maybe before had that like imposter syndrome or barrier to entry just from knowledge perspective.

28
00:03:06,599 --> 00:03:08,539
And now that's basically gone.

29
00:03:08,699 --> 00:03:18,719
However, I do want to recognize that for the people that don't know a lot about programming, there is a huge potential for a lot of risk as well.

30
00:03:18,719 --> 00:03:31,860
Like, for example, if you know nothing about cybersecurity and you tell AI to make you a website that has a portal that people log in, log into, there's a really good chance that that's not locked down or secure in any way.

31
00:03:31,960 --> 00:03:35,879
Right. You're getting a portal, you enter a password and a lot of the security best practices aren't being followed.

32
00:03:36,099 --> 00:03:41,860
So to completely agree, you have to know some, but a fraction of what you used to need to know.

33
00:03:42,860 --> 00:03:47,539
So, Dai, what was the first what was your first vibe coding experience?

34
00:03:48,180 --> 00:03:48,699
My first.

35
00:03:48,719 --> 00:03:51,740
My first vibe coding experience was actually in Canva.

36
00:03:52,439 --> 00:03:52,699
OK.

37
00:03:52,960 --> 00:03:58,079
We had a couple of use cases at Fun.com at our day jobs.

38
00:03:58,079 --> 00:04:17,300
And I had one where we're constantly missing in our studio when models would come and go, especially if we had a like offsite lifestyle shoot where you'd have like a dozen people just coming and going different starts and stop times or maybe even with a break for lunch because it was a full day production.

39
00:04:18,160 --> 00:04:18,560
And.

40
00:04:18,720 --> 00:04:21,740
We would handwrite as people were coming and going.

41
00:04:21,740 --> 00:04:27,960
And if one of us missed it because we were busy doing something else, then it's like, oh, did you catch what time Sarah left?

42
00:04:28,160 --> 00:04:34,580
You know, and it's like, oh, did somebody like, OK, I think it was about this, you know, and it was just like big frustration.

43
00:04:34,580 --> 00:04:37,860
Right. And it happens in the studio as well on site.

44
00:04:38,640 --> 00:04:43,560
So I was I think I can build a really basic time clock.

45
00:04:43,660 --> 00:04:44,880
I know there's a bunch of them out there.

46
00:04:44,880 --> 00:04:45,120
Right.

47
00:04:45,780 --> 00:04:48,400
It's just it's just a button that records.

48
00:04:48,400 --> 00:04:51,540
The time and ends the time and has profiles for everybody.

49
00:04:51,880 --> 00:04:55,720
We're not going to open it up so that it's like available online.

50
00:04:55,720 --> 00:04:58,740
So we don't have to worry about names even being out there.

51
00:04:58,840 --> 00:04:59,820
You don't need a password.

52
00:05:00,000 --> 00:05:01,320
We can keep it super duper simple.

53
00:05:01,580 --> 00:05:07,080
And I was able to go into Canva code, they call it, and prompt my way into this.

54
00:05:07,200 --> 00:05:10,580
And I didn't actually see like you can toggle to the code side.

55
00:05:10,660 --> 00:05:12,480
But I was like, I don't I don't know.

56
00:05:12,840 --> 00:05:14,040
I know basic HTML.

57
00:05:14,360 --> 00:05:15,820
OK, it's a CSS, but that's it.

58
00:05:16,040 --> 00:05:18,140
So I was like, I don't understand what's happening on the back end.

59
00:05:18,400 --> 00:05:21,900
All I know is I can prompt it and tell it exactly what I want it to do.

60
00:05:22,180 --> 00:05:30,280
And and I started really basic and I was like, OK, now I want to have an option to export everything by a date range.

61
00:05:30,300 --> 00:05:34,400
So then I would tell what I want, where I want it, how I want it to function.

62
00:05:34,660 --> 00:05:41,200
You have to be very, very detailed, just like when you're prompting AI in general input equals output, garbage in, garbage out.

63
00:05:41,200 --> 00:05:43,960
Right. So you have to make sure that you're being very detailed about it.

64
00:05:44,440 --> 00:05:48,380
But I was able to make this model time clock that functioned for us.

65
00:05:48,400 --> 00:05:51,920
For a short time until we didn't end up booking models very much anymore.

66
00:05:52,380 --> 00:05:53,300
You decrease that.

67
00:05:53,660 --> 00:05:55,580
But it was that was my first foray into it.

68
00:05:55,720 --> 00:05:58,400
And it it was pretty seamless.

69
00:05:59,520 --> 00:06:00,500
Very, very light lift.

70
00:06:00,760 --> 00:06:01,720
It gave me hope.

71
00:06:01,780 --> 00:06:03,520
I was like, oh, my gosh, what else could I do?

72
00:06:04,020 --> 00:06:07,700
I still remember that first day you came into the office after making it.

73
00:06:07,760 --> 00:06:09,560
And you're like, guys, look at this.

74
00:06:10,100 --> 00:06:12,520
And it was one of the coolest things like.

75
00:06:13,640 --> 00:06:14,380
OK, so.

76
00:06:15,600 --> 00:06:16,420
Canva code.

77
00:06:16,420 --> 00:06:16,480
Canva code.

78
00:06:17,280 --> 00:06:18,380
Shortly after that.

79
00:06:18,400 --> 00:06:21,800
I stumbled across Firebase for personal reasons.

80
00:06:21,940 --> 00:06:24,720
I was just looking at what's out there and I was like, I wonder what I could make.

81
00:06:25,100 --> 00:06:28,380
And we were just in the process of moving to our new building.

82
00:06:29,020 --> 00:06:31,780
And so my office was going to get a TV on the wall.

83
00:06:32,000 --> 00:06:38,600
And I was like, OK, I'm bringing in video games that we can occasionally play in tournament style.

84
00:06:39,020 --> 00:06:40,880
And I wanted a way to manage the tournaments.

85
00:06:40,880 --> 00:06:44,660
And I envisioned like we might only have an hour this day or an hour that day.

86
00:06:44,660 --> 00:06:48,300
And so how can we make what could be a big tournament and schedule?

87
00:06:48,400 --> 00:06:48,820
It out.

88
00:06:48,940 --> 00:06:51,720
And maybe it takes two weeks to complete, but we can still have fun at work.

89
00:06:51,720 --> 00:06:51,980
Right.

90
00:06:52,380 --> 00:06:54,580
And so I ended up using Firebase to make that.

91
00:06:54,580 --> 00:06:58,060
And my I mean, literally, I felt like.

92
00:07:00,400 --> 00:07:01,520
It was insane.

93
00:07:01,660 --> 00:07:06,180
Like, I don't even have words to describe how how exciting it was.

94
00:07:06,660 --> 00:07:11,260
And then I came and showed you and what please tell the crowd what you did with it.

95
00:07:12,040 --> 00:07:14,300
OK, so I took that.

96
00:07:14,720 --> 00:07:16,320
Our CEO had this idea.

97
00:07:16,460 --> 00:07:17,120
Brilliant idea.

98
00:07:17,240 --> 00:07:18,340
It's going swimmingly.

99
00:07:18,920 --> 00:07:28,400
He wanted our customers who are big fans of animatronics for Halloween to be able to submit ideas for their own animatronics.

100
00:07:28,920 --> 00:07:32,980
And so really this great collaboration with the brand.

101
00:07:33,240 --> 00:07:34,980
And he wanted them to be able to do that.

102
00:07:35,600 --> 00:07:42,380
But he also wanted them to be able to promote them because a lot of them have huge followers on like Instagram, YouTube, that type of thing.

103
00:07:42,860 --> 00:07:45,160
And he wanted everybody to be able to vote.

104
00:07:45,540 --> 00:07:45,940
Right.

105
00:07:46,020 --> 00:07:47,500
So they're going to vote for their favorites.

106
00:07:47,740 --> 00:07:48,400
The top 10.

107
00:07:48,400 --> 00:07:52,260
The top 10 get like looked at and then we select two and actually produce them.

108
00:07:52,400 --> 00:07:55,300
They get profits off that 5% revenue off of it.

109
00:07:55,400 --> 00:07:58,580
Like this is a huge program, like very, very built out.

110
00:07:58,700 --> 00:08:03,160
And the voting had to be only one vote per person.

111
00:08:03,520 --> 00:08:06,400
So you can't vote multiple times because that could skew.

112
00:08:06,620 --> 00:08:06,800
Right.

113
00:08:06,860 --> 00:08:08,060
And people could create bots for it.

114
00:08:08,120 --> 00:08:10,660
So there were a lot of different layers to it.

115
00:08:10,840 --> 00:08:14,780
And when you talked about Firebase, I was like, well, I could I was thinking Replit originally.

116
00:08:15,080 --> 00:08:17,160
And then I was like, OK, well, maybe I'll try this.

117
00:08:17,220 --> 00:08:18,160
Because if.

118
00:08:18,400 --> 00:08:20,680
I totally screw it up or I get really stuck.

119
00:08:20,680 --> 00:08:23,640
Nate could probably help me because he's familiar with it.

120
00:08:23,740 --> 00:08:26,320
To be honest, that is the way why I went that way.

121
00:08:27,100 --> 00:08:28,800
Your experience is pretty positive, right?

122
00:08:29,000 --> 00:08:29,320
Overall.

123
00:08:29,980 --> 00:08:30,340
Yes.

124
00:08:30,600 --> 00:08:30,980
Yes.

125
00:08:31,200 --> 00:08:32,019
Positive overall.

126
00:08:32,340 --> 00:08:36,060
At first, I was very frustrated because we actually had mockups for this.

127
00:08:36,460 --> 00:08:41,600
And so I was envisioning it would just take the mockup and do what the like the visual of the mockup.

128
00:08:41,700 --> 00:08:43,280
And it was so far off.

129
00:08:43,280 --> 00:08:48,000
And it added all these different variables and like footers and things in that were not even close.

130
00:08:48,000 --> 00:08:49,500
To what was in the mockup.

131
00:08:49,500 --> 00:08:54,000
So I learned very quickly that I needed to be able to understand what was happening in the code.

132
00:08:54,000 --> 00:08:58,000
And I ended up relying too on like Gemini's built in.

133
00:08:58,000 --> 00:09:01,000
That's the prompting within Firebase because they're both Google.

134
00:09:01,000 --> 00:09:06,500
But I opened up a separate Gemini chat or project.

135
00:09:06,500 --> 00:09:07,799
It's called right in Gemini.

136
00:09:07,799 --> 00:09:12,299
I opened up a separate one there and I was taking screenshots.

137
00:09:12,299 --> 00:09:13,200
What was happening?

138
00:09:13,200 --> 00:09:14,500
Screenshots of the code.

139
00:09:14,500 --> 00:09:15,500
What does this mean?

140
00:09:15,500 --> 00:09:16,700
Here's my issue.

141
00:09:16,700 --> 00:09:17,899
I want the best.

142
00:09:17,899 --> 00:09:23,899
The background of like like a different dev was like really expanded all wonky.

143
00:09:23,899 --> 00:09:25,399
And so I'm like, how do I fix this?

144
00:09:25,399 --> 00:09:26,899
It's not pulling the right image in.

145
00:09:26,899 --> 00:09:28,299
Where do I put that?

146
00:09:28,299 --> 00:09:30,699
So I learned a lot to the point now.

147
00:09:30,699 --> 00:09:39,699
I'm not even really utilizing the ask Gemini what you want to do to your page or site.

148
00:09:39,699 --> 00:09:43,299
And I'm going into the code and working with Gemini on the side.

149
00:09:43,299 --> 00:09:47,799
If I'm running into issues where I'm like, I just added search, for example, on the admin.

150
00:09:47,899 --> 00:09:48,899
Login side.

151
00:09:48,899 --> 00:09:49,899
There's an admin log inside too.

152
00:09:49,899 --> 00:09:50,899
Oh my God.

153
00:09:50,899 --> 00:09:51,899
It was like, it was so great.

154
00:09:51,899 --> 00:09:53,899
And that looks really bad.

155
00:09:53,899 --> 00:09:56,899
And I was like, how do I move this and make it look better?

156
00:09:56,899 --> 00:10:00,899
And you know, so I was, it was fun to watch the adjustments.

157
00:10:00,899 --> 00:10:01,899
Yeah.

158
00:10:01,899 --> 00:10:02,899
Oh my gosh.

159
00:10:02,899 --> 00:10:05,899
When I got that metal log into work, I ran into your office.

160
00:10:05,899 --> 00:10:06,899
I felt like I made fire.

161
00:10:06,899 --> 00:10:08,899
I was like, what Tom Hanks and Wilson?

162
00:10:08,899 --> 00:10:09,899
I made fire.

163
00:10:09,899 --> 00:10:10,899
Right.

164
00:10:10,899 --> 00:10:12,899
But it's just like, I finally got the metal log into work.

165
00:10:12,899 --> 00:10:13,899
There is a few of those too.

166
00:10:13,899 --> 00:10:14,899
You have to go through all their processes too.

167
00:10:14,899 --> 00:10:15,899
Yeah.

168
00:10:15,899 --> 00:10:16,899
I feel like I made fire.

169
00:10:16,899 --> 00:10:17,899
Yeah.

170
00:10:17,899 --> 00:10:18,899
A few stumbles, a few recovers.

171
00:10:18,899 --> 00:10:23,899
And now we have an entirely vibe coded app featured on our website that customers are

172
00:10:23,899 --> 00:10:24,899
using in high volume.

173
00:10:24,899 --> 00:10:25,899
Yep.

174
00:10:25,899 --> 00:10:26,899
High volume.

175
00:10:26,899 --> 00:10:27,899
We have over a thousand entries already.

176
00:10:27,899 --> 00:10:28,899
Yeah.

177
00:10:28,899 --> 00:10:29,899
That's insane.

178
00:10:29,899 --> 00:10:30,899
I haven't even counted how many votes, but some of them have like multiple, multiple,

179
00:10:30,899 --> 00:10:31,899
multiple hundreds, four or 500.

180
00:10:31,899 --> 00:10:32,899
That's actually, that's, I feel like that's a pretty good segue.

181
00:10:32,899 --> 00:10:33,899
Cause what I was going to talk about next is, okay, I want to take you and our listeners

182
00:10:33,899 --> 00:10:34,899
back even just like two years ago.

183
00:10:34,899 --> 00:10:35,899
Yeah.

184
00:10:35,899 --> 00:10:36,899
Yeah.

185
00:10:36,899 --> 00:10:37,899
Yeah.

186
00:10:37,899 --> 00:10:38,899
Yeah.

187
00:10:38,899 --> 00:10:39,899
Yeah.

188
00:10:39,899 --> 00:10:40,899
Yeah.

189
00:10:40,899 --> 00:10:41,899
Yeah.

190
00:10:41,899 --> 00:10:42,899
Yeah.

191
00:10:42,899 --> 00:10:43,899
Yeah.

192
00:10:43,899 --> 00:10:44,899
Yeah.

193
00:10:44,899 --> 00:10:45,899
Yeah.

194
00:10:45,899 --> 00:10:46,899
Yeah.

195
00:10:46,899 --> 00:10:47,899
Yeah.

196
00:10:47,899 --> 00:10:49,899
And, and so one of the reasons we started this is because before vibe coding was widespread,

197
00:10:49,899 --> 00:10:56,899
right, we had this need at fun to monitor some of our partner listings, whether they

198
00:10:56,899 --> 00:10:59,720
be on Amazon, Walmart, whatever.

199
00:10:59,720 --> 00:11:04,879
And I ended up downloading an app, two different apps on my phone and then taking an online

200
00:11:04,879 --> 00:11:08,039
course on how to learn Python and SQL.

201
00:11:08,039 --> 00:11:15,819
And I ended up setting up my own Python scraper and my SQL database to hold all the data entirely

202
00:11:15,819 --> 00:11:17,079
by myself.

203
00:11:17,079 --> 00:11:17,899
And this was before.

204
00:11:17,899 --> 00:11:23,179
even have chats with AI right like I was going to forums that I felt like were active and posting

205
00:11:23,179 --> 00:11:27,639
screenshots with questions to learn what the heck was going on like what was wrong with my code

206
00:11:27,639 --> 00:11:34,259
it's so impressive so impressive it was wild so going from that that where it took me almost a

207
00:11:34,259 --> 00:11:39,220
whole year just to figure out what I was doing and get something working to now in like hours

208
00:11:39,220 --> 00:11:47,179
sometimes you can get what you need going is just insane but I learned very quickly doing it all the

209
00:11:47,180 --> 00:11:52,020
manual way what you were just highlighting with pushing out the search feature right like testing

210
00:11:52,020 --> 00:11:56,760
in your local environment being super sure before you hit push I can't even tell you how many times

211
00:11:56,760 --> 00:12:03,520
I messed up and uh had to learn the hard way how to do things better for example right away when

212
00:12:03,520 --> 00:12:08,320
you started your firebase project you connected it to git so you have version control I didn't

213
00:12:08,320 --> 00:12:12,240
know about git for like six months after my project and I can't tell you how many times that

214
00:12:12,240 --> 00:12:17,160
like midnight I'm updating a line of code because our boss wants new data scripts

215
00:12:17,159 --> 00:12:21,299
and I accidentally cleared out four lines of code that were needed and it took me two weeks to

216
00:12:21,299 --> 00:12:25,719
figure out where that went because I had no backups I learned I learned from your lesson

217
00:12:25,719 --> 00:12:31,240
because you told me right away to hook that up and I did like as I built it yep but all of the

218
00:12:31,240 --> 00:12:38,079
disasters I feel like they they shape you right oh yeah on top of like checking in bad code I also

219
00:12:38,079 --> 00:12:42,019
had this moment where when you're building it yourself and you don't have AI to help you you

220
00:12:42,019 --> 00:12:46,819
don't always think of all the outcomes and I remember the one day when we did this big scrape

221
00:12:47,159 --> 00:12:52,500
and I filled up all the hard drive space that the server had to the point where it took me like over

222
00:12:52,500 --> 00:12:58,559
10 minutes just to log in because it couldn't like it couldn't record my session and then I couldn't

223
00:12:58,559 --> 00:13:03,919
just delete stuff because this is all stuff we needed and I had to figure out how to make trick

224
00:13:03,919 --> 00:13:10,000
my remote cloud server into thinking that my hard drive located in my house was physically attached

225
00:13:10,000 --> 00:13:15,279
to it so I could send a backup to my house before wiping the remote drive and making space yeah

226
00:13:15,279 --> 00:13:17,139
insane anyway

227
00:13:17,159 --> 00:13:23,799
you learn you learn and and as when you're doing it as a as a side project I mean yes it was for

228
00:13:23,799 --> 00:13:27,699
your job but you also didn't do that during your job because you had a job to do during your normal

229
00:13:27,699 --> 00:13:34,480
job hours this is just extra but I think all of that really helped like both you and I right like

230
00:13:34,480 --> 00:13:38,620
talking to you about some of the things I struggled with and saying you should try git

231
00:13:38,620 --> 00:13:45,120
helped you right away like all of those I guess scars of doing things the hard way helped us

232
00:13:45,120 --> 00:13:47,139
really understand the importance of doing things the hard way and I think that's what I'm trying to

233
00:13:47,159 --> 00:13:51,899
emphasize is the importance of QC which I I do think is even if you're vibe coding a sick project

234
00:13:51,899 --> 00:13:56,339
and all these barriers are removed there's still an element of QC that's absolutely needed right

235
00:13:56,339 --> 00:14:02,899
yes absolutely and that's enough that's another lesson that I learned too from doing the actual

236
00:14:02,899 --> 00:14:12,139
like in designer chat coding versus in the code side of things is that when I have an idea and

237
00:14:12,139 --> 00:14:16,600
I'm explaining exactly what I wanted to do and I'll even use Gemini to help me prompt it a certain

238
00:14:16,600 --> 00:14:16,899
way

239
00:14:17,159 --> 00:14:23,539
I have to be really cognizant of all the other things that could touch oh we have these designer

240
00:14:23,539 --> 00:14:29,279
profiles of that that program for the the haunters right and on the admin side I want to be able to

241
00:14:29,279 --> 00:14:35,120
filter by them and so I had them linked to the designer profile but the designer profile

242
00:14:35,120 --> 00:14:44,220
permissions are only allowed for the designer themselves to be able to see the pending or

243
00:14:44,220 --> 00:14:47,139
denied because if something's inappropriate we'll deny it but if it's not appropriate we'll deny it

244
00:14:47,159 --> 00:14:52,879
or approve statuses and you don't see any of that if you're just a regular user visiting

245
00:14:52,879 --> 00:14:58,419
their profile so I had to make sure that I wasn't messing something up for a regular user where then

246
00:14:58,419 --> 00:15:03,819
they could see all of these the denied pieces by allowing the admin side to see it so you have to

247
00:15:03,819 --> 00:15:08,879
like yeah really think through all of those those bits if you're doing the vibe coding side of it

248
00:15:08,879 --> 00:15:15,819
that is I I literally just had that exact same thing happen to me with the hangout spot not even

249
00:15:15,819 --> 00:15:16,480
two weeks ago

250
00:15:17,159 --> 00:15:22,319
so real quick it's also permissions related and I almost poop my pants to be honest but it was all

251
00:15:22,319 --> 00:15:27,980
happening in my testing environment so I caught it and this is why you test in QC however so for

252
00:15:27,980 --> 00:15:33,500
those that don't know I think this fits right in with the journey actually so you start you tried

253
00:15:33,500 --> 00:15:39,439
canva then we found firebase you made the app for fun I made that bracket software and I think the

254
00:15:39,439 --> 00:15:45,279
next step in my journey personally was all these things were so cool and again eliminated barriers

255
00:15:45,279 --> 00:15:47,120
it was fun right there's

256
00:15:47,159 --> 00:15:52,120
instant gratification with it you can now make tools you could never make before but one one

257
00:15:52,120 --> 00:15:59,659
downside that a lot of people don't discuss a lot is that the companies that made these tools had

258
00:15:59,659 --> 00:16:05,419
really great marketing teams and they kind of lock you into their ecosystem to an extent right like

259
00:16:05,419 --> 00:16:10,219
you're using firebase and if you use the designer chat and you build this app it's going to default

260
00:16:10,219 --> 00:16:15,319
to using firebase's database or firebase's authentication or firebase's back at other

261
00:16:15,319 --> 00:16:17,139
back-end services right and then you're going to have to make sure that you're using the right

262
00:16:17,159 --> 00:16:17,659
things right and then you're going to have to make sure that you're using the right things right and

263
00:16:17,659 --> 00:16:21,959
suddenly now your app starts getting attention and visits and now you can no longer live on like

264
00:16:21,959 --> 00:16:27,620
the free tier and there is a convenience tax right like as you scale you will pay

265
00:16:27,620 --> 00:16:34,699
yeah and so I had this idea to make the hangout spot and my vision here was like a privacy forward

266
00:16:34,699 --> 00:16:40,319
brand new social media app designed to help people hang out with their already existing friend

267
00:16:40,319 --> 00:16:46,659
friends right in person eventually online as well I did add that functionality but the intent was

268
00:16:47,159 --> 00:16:51,399
to help people hang out with their friends especially to support the spontaneous side

269
00:16:51,399 --> 00:16:55,919
of things like I'm going to the gym and I don't care if any of my gym bros drop in or are there

270
00:16:55,919 --> 00:17:01,459
at the same time more of like a passive I'm hanging out I wanted to kill that group text

271
00:17:01,459 --> 00:17:08,139
with 20 people of what are you doing right like who wants to come over anyway I I was

272
00:17:08,139 --> 00:17:14,379
while I was debating how I would make this I did want to plan for the fact that it could grow

273
00:17:14,379 --> 00:17:17,139
right and I didn't want to be stuck on a platform that now I'm

274
00:17:17,160 --> 00:17:24,860
funding and so I went on this journey of really trying to switch off of like cloud AI and go to

275
00:17:24,860 --> 00:17:31,720
local AI and I think this also we touched on this in one of our previous episodes of type A people

276
00:17:31,720 --> 00:17:39,240
getting not hobbies but unpaid secondary careers and kind of going all in definition of what I did

277
00:17:39,240 --> 00:17:45,259
I rebuilt my server so that I could host AI models and then I downloaded Microsoft's visual code

278
00:17:47,160 --> 00:17:54,120
app in there or an extension in there called rue code but now instead of using Gemini or Claude or

279
00:17:54,120 --> 00:17:59,700
chat GPT to help me write my local server that's in my closet is running its own AI models to help

280
00:17:59,700 --> 00:18:05,160
me and the benefit there is then everything that I've been coding for the hangout spot I can host

281
00:18:05,160 --> 00:18:09,900
on my own infrastructure like I'm using you know my own database my own file storage everything

282
00:18:09,900 --> 00:18:17,100
there and so I'm not as I scale I'm limited by the resources my server has versus paying per usage

283
00:18:17,160 --> 00:18:26,080
fees on some of those third parties right yeah yep um but in my to go back to the issue I learned

284
00:18:26,080 --> 00:18:32,279
I'm working on the hangout spot it's been live for about a month and a half and I found a need to

285
00:18:32,279 --> 00:18:38,800
roll out co-host capabilities if I set up a hangout maybe it's a bigger one maybe die you

286
00:18:38,800 --> 00:18:43,259
also need to be like a moderator or like a co-host of this event right like you should be able to

287
00:18:43,259 --> 00:18:47,140
accept RSVPs or kick people out or

288
00:18:47,160 --> 00:18:52,560
whatever there's several permissions that are tied just to the host so I went through had AI

289
00:18:52,560 --> 00:18:57,120
helped me draft up an implementation plan we went through and QC'd it made sure we were thinking of

290
00:18:57,120 --> 00:19:03,800
everything I pushed the code out to my testing server open it up every single hangout that

291
00:19:03,800 --> 00:19:11,600
anyone has made is visible to anyone because my co-host logic ruined the permissions of yeah it

292
00:19:11,600 --> 00:19:16,360
blew everything up and granted like I think my implementation plan was like spot on how we should

293
00:19:16,360 --> 00:19:17,140
have done it but I think it's a good thing that I'm able to do it right now and I think it's a good

294
00:19:17,140 --> 00:19:20,900
thing that I forgot to go back and make sure you know that it wasn't messing up permissions

295
00:19:20,900 --> 00:19:28,820
elsewhere so anyway I fixed that and then like four or five days later I found another spot that

296
00:19:28,820 --> 00:19:33,880
it was still wrong and what it was was when you go to a hangout where photo uploads were enabled

297
00:19:33,880 --> 00:19:39,600
that was one little bug where I forgot to again update it for co-hosts so the importance of like

298
00:19:39,600 --> 00:19:42,300
sometimes you're rolling out features that you don't even realize they're going to break other

299
00:19:42,300 --> 00:19:47,000
things and yep it does and it does

300
00:19:47,140 --> 00:19:55,060
should we do a rapid fire I love rapid fire round rapid fire is fun here's a good shared one

301
00:19:55,060 --> 00:20:01,200
cloud hosted set it and forget it or local hosted spinning fans and 30 night use

302
00:20:01,200 --> 00:20:11,860
oh um yeah I'm gonna go self-hosted only because of cost efficiency there again kind of what I

303
00:20:11,860 --> 00:20:16,780
just touched on if I'm gonna build something I'm gonna go all in as a type a and it's going to

304
00:20:17,140 --> 00:20:24,540
fail and I don't want to be stuck paying for somebody else yep that makes sense um I'm I'm

305
00:20:24,540 --> 00:20:29,020
probably still in the cloud hosted set and forget it mode right now just with the projects I've been

306
00:20:29,020 --> 00:20:35,800
working on because I'm looking for speed of deployment and making sure it just works uh

307
00:20:35,800 --> 00:20:41,580
because I'm not doing a personal project I think if I was doing a personal project I would probably

308
00:20:41,580 --> 00:20:46,620
go that route but this one I was like I have two weeks to make it and to demo it for an influencer

309
00:20:47,140 --> 00:20:52,340
along with whatever else I'm doing in my daily job so I needed uh I needed something quick

310
00:20:52,340 --> 00:20:58,820
and and that's a super important distinction right like um I'm bootstrapped I wanted to start a side

311
00:20:58,820 --> 00:21:02,920
project and I don't want to invest anything other than my own time that's a very different approach

312
00:21:02,920 --> 00:21:15,520
than like we need to get this going now yep okay for die what is the most unhinged prompt you've

313
00:21:15,520 --> 00:21:16,980
given some of the

314
00:21:17,140 --> 00:21:26,820
vibe coding designers oh my gosh unhinged prompt that actually produced something that works

315
00:21:26,820 --> 00:21:36,920
oh that pretty or not you take it either way either way um man I wish I had one pulled up

316
00:21:36,920 --> 00:21:42,800
that I could scroll back through I I know I definitely prompted back this is before I started

317
00:21:42,800 --> 00:21:45,920
really getting on to the code side of things and I was very frustrated

318
00:21:47,140 --> 00:21:51,740
I told it to stop creating images and to use the image I provided

319
00:21:51,740 --> 00:21:59,080
like why do you keep doing this stop it I would say my unhinged examples all involve swear words

320
00:21:59,080 --> 00:22:06,920
like it's like I did not tell you to do that so stop freaking doing that yeah one that actually

321
00:22:06,920 --> 00:22:13,500
worked though I'm gonna say creating my admin dashboard side because first I built the design

322
00:22:13,500 --> 00:22:16,780
program and it's designprogram.halloweencostumes.com

323
00:22:17,140 --> 00:22:21,640
if you ever want to check it out but I built it and then I was like okay I can go into the

324
00:22:21,640 --> 00:22:28,120
database and approve just from the submission logs by updating the text fields in there but

325
00:22:28,120 --> 00:22:34,120
I need a way for my team to be able to do it because I can't manage all of that on a day-to-day

326
00:22:34,120 --> 00:22:41,280
basis so I had to prompt it to allow for a specific gmail login because I set it up for

327
00:22:41,280 --> 00:22:46,540
gmail and meta logins and that's it that's the only way you can log in and so I gave it a very

328
00:22:46,540 --> 00:22:47,120
specific one and I was like okay I'm gonna do this I'm gonna do this I'm gonna do this I'm gonna do this

329
00:22:47,140 --> 00:22:53,160
one and said for this one only then I would like to see an option in the drop down for an admin

330
00:22:53,160 --> 00:22:59,960
dashboard and then specifically for the admin dashboard anything coming in that's pending for

331
00:22:59,960 --> 00:23:04,759
approval and I set up all of those states ahead of time like what to display and how to display it

332
00:23:04,759 --> 00:23:09,180
and everything and it worked the first time I mean there was like a couple little tweaks where I'm

333
00:23:09,180 --> 00:23:14,940
like this is a little ugly and and hard to like from a ux standpoint but everything functioned

334
00:23:14,940 --> 00:23:17,120
right away that's not somehow I don't know I don't know I don't know I don't know I don't know I don't

335
00:23:17,140 --> 00:23:23,820
know somehow I don't know if this is unhinged but the most basic prompt that I did not think

336
00:23:23,820 --> 00:23:31,940
would work that did work where I was like what the heck is on the hangout spot I felt like again

337
00:23:31,940 --> 00:23:37,100
solo dev like I don't have a team of people I can answer bug reports or questions or whatever so I'm

338
00:23:37,100 --> 00:23:40,560
trying really hard to like you can file a bug report in the app and I'll get back to you and I

339
00:23:40,560 --> 00:23:44,520
can but I don't want like an email box you know I don't want a bunch of things that I have to

340
00:23:44,520 --> 00:23:46,960
yeah yeah I don't want to get

341
00:23:47,140 --> 00:23:51,880
bogged down so I was like okay one of my friends was like how do I do this and like

342
00:23:51,880 --> 00:23:55,960
yeah I don't want questions on how to do things either so I should probably make like a self-help

343
00:23:55,960 --> 00:24:03,540
like wiki oh yeah I gave it one sentence and was like my users need a wiki that I can control from

344
00:24:03,540 --> 00:24:08,120
the admin portal that allows me to document commonly used features where they can like

345
00:24:08,120 --> 00:24:16,140
whatever I did not give it much direction and it came out so legit you can nest pages it

346
00:24:16,140 --> 00:24:17,120
automatically adds like a lot of stuff to it and it's like it's like it's like it's like it's like

347
00:24:17,140 --> 00:24:23,820
like emojis I mean like I feel like my wiki blew up in the best way possible so it's really

348
00:24:23,820 --> 00:24:27,660
understanding best practices probably for something like that because that's a common

349
00:24:27,660 --> 00:24:34,100
use case yeah and wow and I didn't have to give a lot of context because it already knew what my app

350
00:24:34,100 --> 00:24:40,600
was and I wasn't putting any type of authentication or blockers around the wiki I actually the only

351
00:24:40,600 --> 00:24:45,100
thing I went back and had it do after was make sure that my wiki pages showed up in my site map

352
00:24:45,100 --> 00:24:45,180
because those can help with seo right so I didn't have to give a lot of context because it already

353
00:24:45,180 --> 00:24:47,120
knew what my app was and I wasn't putting any type of authentication or blockers around the wiki I

354
00:24:47,140 --> 00:24:49,820
didn't have to give a lot of context because that's a common use case right but right yeah it

355
00:24:49,820 --> 00:24:55,500
was pretty nuts a one-liner got a whole wiki data or a whole wiki infrastructure set up on my app and

356
00:24:55,500 --> 00:25:01,640
it was it was cool Nate just talking about this I'm like what's my next project what am I gonna

357
00:25:01,640 --> 00:25:07,660
I kind of wanted to talk about that at the end like I'm sorry I'm jumping ahead somehow no that's

358
00:25:07,660 --> 00:25:12,520
like that's what makes this so fun like sometimes when I'm bored and it's like nine o'clock at night

359
00:25:12,520 --> 00:25:15,480
and it's dark outside I'm just sitting on my couch like okay what do I want to make next

360
00:25:17,140 --> 00:25:23,160
well my son okay we'll get to it let's uh let's keep going with our with our uh rapid fire here

361
00:25:23,160 --> 00:25:29,259
okay what was your best deep end struggle the moment you realized you were way over your head

362
00:25:29,259 --> 00:25:38,500
oh okay so back to when I was transitioning from cloud AI to local AI I rebuilt my home server

363
00:25:38,500 --> 00:25:44,700
right and so I I had a home server it was running a lot of services for me before but not AI so that

364
00:25:44,700 --> 00:25:47,120
was like the big thing I wanted to fix was not run AI and I was like okay I'm gonna do this I'm gonna

365
00:25:47,140 --> 00:25:54,240
run AI and AI runs primarily on GPUs not CPUs so I had to get like a graphics card my server is like

366
00:25:54,240 --> 00:25:58,620
it's a big computer box I bought like a server box but it looks like a slightly bigger desktop

367
00:25:58,620 --> 00:26:04,380
right if you can visualize that okay and yeah yeah and it's just sitting in my closet in the

368
00:26:04,380 --> 00:26:09,740
laundry room in the corner only with two cables plugged in a power cable and an internet cable

369
00:26:09,740 --> 00:26:14,140
there's no monitor keyboard mouse like no peripherals like it just sits there quietly

370
00:26:14,140 --> 00:26:16,820
in the corner can you please

371
00:26:17,140 --> 00:26:23,400
can you please take a picture of it yeah it's cute I'm like envisioning not that I ever think

372
00:26:23,400 --> 00:26:29,240
we'll be like Jeff Bezos but I'm envisioning like that first Amazon shot you know the desk and it's

373
00:26:29,240 --> 00:26:35,200
like a hand-drawn picture behind him do you know this have you seen this photo we should we need

374
00:26:35,200 --> 00:26:41,580
a photo of that go ahead continue so I bought all of the hardware put it all together everything's

375
00:26:41,580 --> 00:26:47,120
turning on and passing tests and I could not get AI to run on the GPUs

376
00:26:47,140 --> 00:26:55,100
only on the CPU and that was like 15 times slower minimum it took me like almost two weeks to

377
00:26:55,100 --> 00:27:00,480
figure out how to install the right graphics driver so that my server knew how to use the GPU

378
00:27:00,480 --> 00:27:07,960
okay and the worst part was like I'm talking like probably spent 40 hours on this issue like a full

379
00:27:07,960 --> 00:27:15,040
full time like weeks worth of work it was the exact same command that I had tried the very

380
00:27:15,040 --> 00:27:17,120
first time with a flag added to the end and I was like I'm gonna have to do this again and I'm gonna

381
00:27:17,140 --> 00:27:25,740
saying this is headless meaning no monitor keyboard and mouse oh my gosh wow yep wow

382
00:27:25,740 --> 00:27:35,280
the more you know right so what about you um I definitely had to our rabbit holes I don't

383
00:27:35,280 --> 00:27:40,480
think I had anything that I deployed that failed completely like it didn't go live

384
00:27:40,480 --> 00:27:47,120
meta the meta login was definitely that was a multi-day like I don't know how many things

385
00:27:47,140 --> 00:27:55,660
I switched in the meta app side of things and finally I realized there was one flag for email

386
00:27:55,660 --> 00:28:01,060
address that was separate than profile and I had asked Gemini I had asked GPT I had asked everybody

387
00:28:01,060 --> 00:28:06,060
like taking screenshots what do I need what do I need this is what I'm trying to do and it said

388
00:28:06,060 --> 00:28:10,380
I had everything and that it was correct and then I got it approved through Facebook and then it

389
00:28:10,380 --> 00:28:16,820
still didn't work and I was like what's going on and finally finally um was able to go in I'm like

390
00:28:17,140 --> 00:28:23,680
I gotta think that I need email and be and request that for meta and not just profile information

391
00:28:23,680 --> 00:28:29,940
and once I did that the next morning that was approved and then magically it worked so uh yeah

392
00:28:29,940 --> 00:28:35,320
didn't deploy it that way uh but I definitely spent many many an hour trying to figure out

393
00:28:35,320 --> 00:28:39,720
what the heck was wrong and why it wouldn't work it was just that simple checkbox props to you

394
00:28:39,720 --> 00:28:44,580
I originally was going to do meta login on the hangout spot and then I read forums about how

395
00:28:44,580 --> 00:28:47,080
it's notoriously incredibly difficult to set up compared to Google

396
00:28:47,140 --> 00:28:51,820
and I gave up I didn't even try so the fact that you guys don't work like I was like Google's

397
00:28:51,820 --> 00:28:56,900
enough man I went with a sovereign email login and Google and that's it well when you're ready

398
00:28:56,900 --> 00:29:02,740
Nate if you ever want to add it on hopefully hopefully I can save you some hours I can consult

399
00:29:02,740 --> 00:29:10,920
Dai from Type A Unhinged yes sir Dai at Type A Unhinged all right one more for you here just you

400
00:29:10,920 --> 00:29:16,920
root code or github copilot who is the better assistant when the logic gets weird

401
00:29:17,140 --> 00:29:24,360
my biggest gripe with github copilot as well as even like Gemini and Claude now is that they

402
00:29:24,360 --> 00:29:30,280
even on paid plans have extremely limited how much you can use it so like you'll run through

403
00:29:30,280 --> 00:29:37,460
your available token quota so fast so for that reason alone I use root code and the models I

404
00:29:37,460 --> 00:29:44,680
have on my own server okay kind of hit on this earlier Dai but curious on your take is vibe

405
00:29:44,680 --> 00:29:46,980
coding a shortcut or a new language

406
00:29:47,140 --> 00:29:54,380
new language it's a little bit of both to be honest it's a little bit of both but you you

407
00:29:54,380 --> 00:30:00,620
can't just describe what you want and poof it's there you have to understand how all the pieces

408
00:30:00,620 --> 00:30:06,720
work together or be willing to put in the time to figure it out right right and at the same time

409
00:30:06,720 --> 00:30:14,520
like you're not actually writing the code you're maybe updating code to fix things or make it look

410
00:30:14,520 --> 00:30:17,120
better you might add some blocks in here or you might add some blocks in here or you might add

411
00:30:17,140 --> 00:30:21,820
some blocks in here and there that if you understand it but I would say it's a new language

412
00:30:21,820 --> 00:30:27,020
because yeah it's really hard to get something just with without knowing how it all functions

413
00:30:27,020 --> 00:30:29,880
together on the backend and I feel like the biggest thing you learn when you start vibe

414
00:30:29,880 --> 00:30:34,500
coding is how to coach the AI assistant through what you need right like there's a lot of how

415
00:30:34,500 --> 00:30:39,280
you phrase things do you repeat your main goal at the end you know you don't want to put error

416
00:30:39,280 --> 00:30:42,880
messages that are too long because it can start hallucinating things like that I agree with you

417
00:30:42,880 --> 00:30:47,120
new language I'm a little nervous if like as AI assistants I'm not going to be able to do that

418
00:30:47,140 --> 00:30:50,340
AI advances if it can remember some of our old conversations because

419
00:30:50,340 --> 00:30:57,600
I kind of bully it sometimes and I don't want that to come bite me in the butt but right now

420
00:30:57,600 --> 00:31:04,259
I'm like it's just a robot it doesn't know I feel like I've shared this uh in an episode in the past

421
00:31:04,259 --> 00:31:10,759
before but early early early days back before image gen and everything right uh our copywriters

422
00:31:10,759 --> 00:31:16,060
were using it and our copywriting manager he um had an instance where it got cheeky with him

423
00:31:16,060 --> 00:31:17,020
because he would

424
00:31:17,140 --> 00:31:23,140
yeah he would tell it uh please don't use that phrase anymore I would really appreciate it if

425
00:31:23,140 --> 00:31:28,300
you didn't include that it was like this costume is sure to turn heads or something and just put

426
00:31:28,300 --> 00:31:33,500
it in everything and so he's like please don't use it anymore right and it actually came back

427
00:31:33,500 --> 00:31:39,580
with one later on saying that phrase and then in parentheses after it in the product description

428
00:31:39,580 --> 00:31:45,820
you don't want like oh that's right you don't want me to use that phrase whereas somebody else on the

429
00:31:45,820 --> 00:31:47,120
team was like you don't want me to use that phrase and he was like oh that's right you don't want me

430
00:31:47,120 --> 00:31:53,700
don't ever use that again just like very direct blunt about it and it never used it again so the

431
00:31:53,700 --> 00:31:58,720
way you talk to it at least way back then I'm not sure you know new models right it's all different

432
00:31:58,720 --> 00:32:05,820
um it it does understand that context and how you interact with it and wants to interact back

433
00:32:05,820 --> 00:32:12,660
with you the way you do because it thinks you're gonna be more comfortable so so I have to know

434
00:32:12,660 --> 00:32:16,520
what are you planning to make next I want to jump more into

435
00:32:17,120 --> 00:32:17,620
what are you planning to make next I want to jump more into

436
00:32:17,620 --> 00:32:23,220
and make some agents make some agents there to automate some things there's some stuff we've

437
00:32:23,220 --> 00:32:32,620
talked about it in the day job of just massive emails that require work for a number of different

438
00:32:32,620 --> 00:32:38,680
departments and having them having having the co-pilot agent really like disperse it into

439
00:32:38,680 --> 00:32:44,440
separate tickets and provide updates on what how many are done and not done versus having a human

440
00:32:44,440 --> 00:32:47,100
have to read every email copy and paste every email and then have to do it again and again and

441
00:32:47,100 --> 00:32:51,680
paste things into a bunch of different ticket systems for different teams either that or I want

442
00:32:51,680 --> 00:32:57,700
to build a base for my son for his website and then allow him to really have some fun with it

443
00:32:57,700 --> 00:33:02,580
but get get the basics in there so that he doesn't have to get worried and bogged down with all that

444
00:33:02,580 --> 00:33:09,660
yet let him do some more of the fun stuff to really like hook him in yeah I don't know that

445
00:33:09,660 --> 00:33:14,760
I have a great next project because I still have so many ideas of how I want to expand the hangout

446
00:33:14,760 --> 00:33:17,080
spot I don't know I don't know I'm trying to figure out how to do that I don't know I don't

447
00:33:17,100 --> 00:33:17,500
know I'm trying to figure out how to do that I don't know I'm trying to figure out how to do that

448
00:33:17,500 --> 00:33:22,340
the best thing that I could use that other people would benefit from too you know like I don't want

449
00:33:22,340 --> 00:33:27,500
to code something just for me yeah I don't know the possibilities are freaking endless and that's

450
00:33:27,500 --> 00:33:32,400
what makes it so hard you know what I mean yeah and being type a like I don't want to do a half

451
00:33:32,400 --> 00:33:41,360
ass project like I want to like it needs to be like eyes dotted t's crossed yes we're gonna have

452
00:33:41,360 --> 00:33:47,020
to have a cocktail on my porch when it gets nice in a couple of weeks and brainstorm because I

453
00:33:47,100 --> 00:33:56,140
feel like we're gonna just like oh my gosh let's vibe come live yep yep ah I'm pumped the possibility

454
00:33:56,140 --> 00:34:03,000
I'm pumped too so I think the bottom line really is don't be intimidated just get in there get your

455
00:34:03,000 --> 00:34:08,960
hands dirty play around with it if you break something it's fine just start over or use the

456
00:34:08,960 --> 00:34:16,500
tools to help fix it jump into some other AI chats and and it'll show you the way just give it a shot

457
00:34:17,099 --> 00:34:25,500
this is the way all right guys until next time stay type a and a little unhinged

458
00:34:25,500 --> 00:34:41,079
thanks for listening to type a unhinged now it's time to get to work

459
00:34:41,079 --> 00:34:45,219
make sure to hit subscribe so you never miss a system update

460
00:34:47,099 --> 00:34:49,159
woo