WEBVTT

1
00:00:05.280 --> 00:00:11.400
Hello, Hello, and welcome back, lovely listeners for another exciting episode of

2
00:00:11.800 --> 00:00:19.000
JavaScript Jabber. Today on our show, we have myself as host, Ag

3
00:00:19.120 --> 00:00:27.760
O'Neill, Steve our dad joker what, and then we have I'm trying to

4
00:00:27.760 --> 00:00:32.200
find your last name now, Zach. Zach writes code, last name rights

5
00:00:32.240 --> 00:00:36.439
code. That's all word, that's
what it says, That's what I'm going

6
00:00:36.479 --> 00:00:40.439
with. Go ahead and introduce yourself. Tell us what you're here for.

7
00:00:41.159 --> 00:00:44.960
Uh yeah, my name is Zach
langdon and or Zach writes code in this

8
00:00:45.039 --> 00:00:51.119
case and software developer. I've been
writing code for fifteen some odd years,

9
00:00:51.159 --> 00:00:56.719
probably more than that, everything from
see maybe a little assembly all the way

10
00:00:56.759 --> 00:01:02.240
to like JavaScript and HTML and things
of that nature. Front end, back

11
00:01:02.320 --> 00:01:04.680
end, not afraid of any of
it. I like DevOps. I do

12
00:01:04.719 --> 00:01:10.319
a little bit of DevOps in my
daytime, daytime job, and I'm a

13
00:01:10.519 --> 00:01:17.400
containerization zelot, a bit of a
Kubernetes enthusiast, but I'm very beginnerish on

14
00:01:17.439 --> 00:01:23.280
that. Husband and a father,
and recently, in my very limited free

15
00:01:23.280 --> 00:01:29.159
time, a front end framework author. That's good because we don't have enough

16
00:01:29.159 --> 00:01:34.400
of those, yeah right, we
need more of that. Well, my

17
00:01:34.480 --> 00:01:38.599
first question is actually going to be
it's got something on my tongue there.

18
00:01:38.680 --> 00:01:42.400
Yeah, okay, my first question
is actually going to be I see that

19
00:01:42.480 --> 00:01:47.920
you offer hosting services. That is
unusual. Like, you know, just

20
00:01:47.959 --> 00:01:53.120
about every guest we've ever had has
some framework for the front end thing that

21
00:01:53.159 --> 00:01:57.560
they've written, but not all of
them offer hosting. So will you will

22
00:01:57.599 --> 00:02:00.719
you tell me a little bit about
that just just is like a unique thing

23
00:02:00.760 --> 00:02:06.799
about you. Yeah. Actually,
it's interesting that you asked that because nobody

24
00:02:06.920 --> 00:02:10.639
uses that service except for my previous
company that I worked for. They're the

25
00:02:10.639 --> 00:02:16.319
only ones who leverage. Basically,
I have one server and a data center

26
00:02:16.319 --> 00:02:21.199
that I own, you know,
and then some that I don't own that

27
00:02:21.319 --> 00:02:23.560
you know, for failover and things
of that nature. And so I think

28
00:02:23.759 --> 00:02:28.680
a couple of years ago, maybe
three or four now, I just started

29
00:02:28.680 --> 00:02:31.560
trying to build that website which I
haven't updated and probably about that long.

30
00:02:32.719 --> 00:02:35.560
And that was one of those things
that I put on there is like,

31
00:02:35.599 --> 00:02:38.400
hey, if you're looking for this, uh you know, you know,

32
00:02:38.520 --> 00:02:40.479
send me, send me an email, we'll chat and maybe I can offer

33
00:02:40.479 --> 00:02:45.680
you some hosting services, try to
help you out with your project. But

34
00:02:45.759 --> 00:02:50.240
most of that is geared toward doing
like building things for you know, a

35
00:02:50.240 --> 00:02:53.479
client or a contract or a customer
as far as like, hey, they've

36
00:02:53.520 --> 00:02:55.199
got this thing they want to build, and that's what I have. Uh,

37
00:02:55.599 --> 00:03:02.560
this one customer, I built a
custom erp system for them and I

38
00:03:02.639 --> 00:03:10.080
host it. So they've been using
that for five ten years now. So

39
00:03:10.199 --> 00:03:15.439
yeah, I nerd out a little
bit on the DevOps side of things.

40
00:03:15.479 --> 00:03:20.439
And I always wanted to have my
own server in the cloud, if you

41
00:03:20.439 --> 00:03:24.240
will, one that I owned and
that I maintained. And so that's where

42
00:03:24.240 --> 00:03:30.919
that comes from. So do you
use is it proxmox? Yes? Are

43
00:03:30.960 --> 00:03:37.000
you using? All right? Yeah? I also am using proxmox on a

44
00:03:37.039 --> 00:03:43.919
four server cluster with high availability and
all that. Yeah, you're you're further

45
00:03:43.960 --> 00:03:47.479
along than I am because I've just
got the one server. No, it's

46
00:03:47.560 --> 00:03:54.520
not a cluster at all. Well, we bought on eBay the last gen

47
00:03:54.599 --> 00:04:00.560
servers that were being dumped, and
now the next generation of is just getting

48
00:04:00.680 --> 00:04:05.560
dumped because all of these companies,
you know, I mean you know this

49
00:04:05.639 --> 00:04:10.159
stuff. You know, Amazon's running
servers that are like fifteen years old,

50
00:04:10.159 --> 00:04:13.960
and as they offload them, they
eventually end up on eBay and so you

51
00:04:14.000 --> 00:04:18.959
can get the same technology with the
same power that Amazon's running today on their

52
00:04:19.600 --> 00:04:25.040
servers that have been retired, you
know, from and and so yeah,

53
00:04:25.079 --> 00:04:28.920
we just we got them super cheap. I think it was about six hundred

54
00:04:28.959 --> 00:04:31.959
dollars a server, seven hundred dollars
a server, pretty much more or less

55
00:04:31.959 --> 00:04:36.560
maxed out, yep, exactly.
And so so yeah, so we we

56
00:04:36.680 --> 00:04:40.680
paid less than the cost of what
someone would pay for one server, and

57
00:04:40.680 --> 00:04:45.079
we got the cluster in anyway,
But that's that's cool. That's cool.

58
00:04:45.439 --> 00:04:46.639
Yeah, that's what it's. That's
where it's at right there. Get them

59
00:04:46.639 --> 00:04:50.959
on eBay, host them yourself.
Yeah, and it's it's been going well

60
00:04:50.959 --> 00:04:55.759
for us. We've been running it
a year. I've transferred almost everything.

61
00:04:56.199 --> 00:04:59.800
There's only two projects I have left
that haven't transferred, like you, running

62
00:04:59.800 --> 00:05:01.319
some client stuff there as well.
Hoping to open it up to the general

63
00:05:01.360 --> 00:05:05.000
public as well, but want to
do it in an automated fashion when we

64
00:05:05.480 --> 00:05:11.160
get to that point. But yeah, anyway, so that was cool just

65
00:05:11.199 --> 00:05:15.519
to see that. And fellow proxmoxx
user. So yeah, now the reason

66
00:05:15.560 --> 00:05:20.639
that we actually have you on the
show, or that Dan reached out to

67
00:05:20.680 --> 00:05:24.360
you, I'm happy to talk about
you know, any of it. By

68
00:05:24.360 --> 00:05:28.560
the way, I think that's that's
totally fine. But uh, you know,

69
00:05:28.639 --> 00:05:33.000
Dan was thinking that res act was
a rather timely framework to discuss.

70
00:05:33.720 --> 00:05:38.199
So among the sea of front end
frameworks, now we've got resact. Tell

71
00:05:38.279 --> 00:05:42.040
us about res act. Oh wow. So I don't know that I picked

72
00:05:42.120 --> 00:05:46.279
up on that piece with Dan.
He just found it interesting and wanted to

73
00:05:46.319 --> 00:05:48.720
talk about it. But yeah,
So resact is basically, you know,

74
00:05:48.839 --> 00:05:54.360
it's a front end framework. It's
like React in the sense that you write

75
00:05:54.480 --> 00:06:00.279
components using JSX. It's very at
home if you've used React for anybody who

76
00:06:00.319 --> 00:06:05.079
has. But it's also like Spelt
in that there's some pieces of it where

77
00:06:05.240 --> 00:06:10.040
it transforms the code that you're right, because it's not exactly I mean,

78
00:06:10.079 --> 00:06:15.959
it's all JavaScript, it's valid JavaScript
or typescript in this case, but it

79
00:06:15.079 --> 00:06:20.360
transforms it into code that does more
under the hood. So like spelt,

80
00:06:20.399 --> 00:06:26.319
will you know, you do a
ruin or a statement that is a variable,

81
00:06:26.720 --> 00:06:30.279
and then all you have to do
is assign things to that variable,

82
00:06:30.480 --> 00:06:35.360
and wherever that variable is used in
the code, it'll update in the UI.

83
00:06:36.319 --> 00:06:42.399
And so I've taken something like that
and made it but with JSX,

84
00:06:42.480 --> 00:06:46.480
which is was important to me because
I really like JSX. I've actually really

85
00:06:46.480 --> 00:06:50.680
loved the templating, and I also
like the fact that I can author multiple

86
00:06:50.720 --> 00:06:56.759
components in one file if I need
to. It's pretty wide open in that

87
00:06:56.800 --> 00:07:00.480
regard. Whereas spelt, there are
some things about well that I really liked

88
00:07:00.600 --> 00:07:04.439
in that is that whole create a
variable and just assigned to it and it'll

89
00:07:04.519 --> 00:07:11.680
update where it is. But I
didn't really like the authoring of the components

90
00:07:11.720 --> 00:07:14.759
themselves and that it had to be
one file. And I know there's a

91
00:07:14.759 --> 00:07:17.879
whole host of people out there who
believe that you should only ever have one

92
00:07:17.920 --> 00:07:21.959
component in one file, and they
may be right, they may be wrong.

93
00:07:23.040 --> 00:07:25.600
I'm not going to argue that.
I just know that I like to

94
00:07:26.480 --> 00:07:30.040
have the flexibility if I want to
to drop a separate component right in a

95
00:07:30.079 --> 00:07:33.120
file I'm in and not have to
create a new file for it. So

96
00:07:33.519 --> 00:07:39.560
that's my long winded intro. But
there are other things that I've done that

97
00:07:39.639 --> 00:07:44.040
I think make it more interesting.
With the way you do state in general,

98
00:07:44.160 --> 00:07:49.519
and that is a lot of frameworks
you have to download a third party

99
00:07:50.120 --> 00:07:55.199
state management thing. There's not a
lot of frameworks that actually give you for

100
00:07:55.399 --> 00:07:59.879
like example, for like REDUCS or
any of these other global state management libraries.

101
00:08:00.639 --> 00:08:05.160
What I've come up with is a
way that you can create signals anywhere

102
00:08:05.959 --> 00:08:11.199
in a module, in a component, outside of a component in a loop,

103
00:08:11.519 --> 00:08:16.920
you can So there's no like hook
rules. You can create these signals

104
00:08:16.959 --> 00:08:22.199
anywhere. And because of that,
you can just create a module that has

105
00:08:22.279 --> 00:08:28.560
these signals in it, import those
you know variables into your component and update

106
00:08:28.600 --> 00:08:33.720
them from anywhere. They'll update all
the places that they occur in your js

107
00:08:33.000 --> 00:08:39.320
X, in the UI, et
cetera. So signals is a thing that

108
00:08:39.519 --> 00:08:46.600
is I know it's been a recent
hype train. I don't actually know what

109
00:08:46.639 --> 00:08:50.080
it means. So for background,
I don't know how much of the show

110
00:08:50.080 --> 00:08:56.000
you watch, but my background in
JavaScript is node and I do like the

111
00:08:56.039 --> 00:08:58.559
stuff that I do in the browser
is like the engineering stuff in the browser,

112
00:08:58.600 --> 00:09:03.679
like web sockets or or like niche
browser features. I don't do any

113
00:09:03.720 --> 00:09:11.799
of the CSS or or the application
state management. So I think we had

114
00:09:11.799 --> 00:09:16.480
someone that that had talked about signals
before, but I have totally forgotten what

115
00:09:16.519 --> 00:09:20.759
it means. And I imagine that
along with many of our listeners. It's

116
00:09:20.799 --> 00:09:24.360
you know, not something that that
has been adopted by everybody yet or that

117
00:09:24.360 --> 00:09:26.879
people are familiar with. So give
us a rundown of what you mean by

118
00:09:26.879 --> 00:09:33.000
that and what the what what's the
benefit? Yeah, that's an excellent question

119
00:09:33.960 --> 00:09:41.440
because I do think there's a some
very a lot of similarities between like,

120
00:09:41.519 --> 00:09:43.519
let's say, for example, and
React. You'll reach for use state in

121
00:09:43.559 --> 00:09:48.639
your component to manage a piece of
state, uh the but you know,

122
00:09:48.799 --> 00:09:52.600
in like pre Act, they've got
signals and so you'll use use signal,

123
00:09:52.320 --> 00:09:56.320
and Spelt has signals as well,
Solid has signals. All these frameworks have

124
00:09:56.399 --> 00:10:03.080
signals. The fundamental difference between like
React, where you can throw a used

125
00:10:03.080 --> 00:10:09.039
state hook in your component is that
anytime you update that state, it will

126
00:10:09.080 --> 00:10:15.720
re render the entire component, whereas
signals are designed to not require needing to

127
00:10:15.759 --> 00:10:22.320
re render the entire component. They're
designed to render or update is granular as

128
00:10:22.480 --> 00:10:26.120
possible the thing that is in the
dom. So, for example, a

129
00:10:26.159 --> 00:10:31.120
text node, if you create a
signal, assign it to value l world,

130
00:10:31.759 --> 00:10:35.720
throw that signal variable in your JSX
in a P tag or H one

131
00:10:35.759 --> 00:10:43.159
tag. When you modify that variable
or signal, it will automatically update the

132
00:10:43.200 --> 00:10:48.879
text node's that it's attached to in
the dom as opposed to trying to re

133
00:10:48.879 --> 00:10:56.480
render the entire jsx component. So
that's really what I think the key difference

134
00:10:56.559 --> 00:11:01.360
is between you know, like state
and react versus signals. So how is

135
00:11:01.399 --> 00:11:07.600
this different from the old two way
data binding like what Angular really had its

136
00:11:07.600 --> 00:11:13.919
heyday with. So that's another really
good question because I was thinking about this.

137
00:11:15.039 --> 00:11:20.320
I have this and resact where you
can do this pseudo two way data

138
00:11:20.320 --> 00:11:24.240
binding. But I know a lot
of people are really like, oh no,

139
00:11:24.360 --> 00:11:28.440
that's a code smell. You shouldn't
do two way data binding anymore.

140
00:11:28.440 --> 00:11:33.919
We moved away from that a long
time ago in their right because one way

141
00:11:33.000 --> 00:11:37.600
data flow has one out for a
lot of really good reasons. But there's

142
00:11:37.600 --> 00:11:41.720
a trick involved in that. I'm
not really it's not really two way data

143
00:11:41.720 --> 00:11:48.960
binding and resa act and so it's
different in that it is a one way

144
00:11:50.039 --> 00:11:52.440
data flow under the hood. So
a lot of that transformation that happens when

145
00:11:52.480 --> 00:11:58.159
you compile the code out will transform
it into code that is very much a

146
00:11:58.240 --> 00:12:03.720
one way data flow. So the
thing that's parsing the code is looking for

147
00:12:03.840 --> 00:12:11.879
mutation and then creating a function that
calls an update routine. Correct. Okay,

148
00:12:11.759 --> 00:12:16.000
So it's it has a look of
two way data binding and that you

149
00:12:16.000 --> 00:12:18.519
can just create a variable and you
don't have to do the updates, which

150
00:12:18.559 --> 00:12:22.480
you can actually, so a resact
gives you that ability to step in and

151
00:12:22.519 --> 00:12:24.120
say, you know, I want
to take full control over that update cycle,

152
00:12:24.480 --> 00:12:30.720
and so you just you create,
you can create that mechanism that will

153
00:12:31.440 --> 00:12:33.840
particularly with forms, right, so
inputs, you do this on change event

154
00:12:33.879 --> 00:12:37.159
and react that will update the state. You don't have to do that in

155
00:12:37.240 --> 00:12:41.759
resact, but you can, and
as soon as you do it, you

156
00:12:43.000 --> 00:12:48.840
now own the cycle of the update. Okay, so here a signal it

157
00:12:48.080 --> 00:12:52.200
look, I'm just looking at your
demo code. Am I to understand correctly

158
00:12:52.240 --> 00:12:56.000
that a signal is just any variable
that's declared where a dollar sign is going

159
00:12:56.080 --> 00:13:03.440
to get transpiled into a signal container? Correct? Okay, So just out

160
00:13:03.440 --> 00:13:09.639
of curiosity, I come from the
view world, and so, uh with

161
00:13:09.840 --> 00:13:15.279
the rewrite from View two to three, one of the big under the hood

162
00:13:15.360 --> 00:13:22.679
changes was using proxy jobscript proxies,
and so I'm just curious, you know,

163
00:13:22.399 --> 00:13:28.039
everything I've seen about signals, you
know, and I'm not a real

164
00:13:28.360 --> 00:13:30.559
under the hood guy, more of
the top level, you know, making

165
00:13:30.600 --> 00:13:33.080
the UI type of stuff. It
seems like six or one a half dozen

166
00:13:33.120 --> 00:13:37.679
to the other. Is that an
accurate statement when you're comparing you know,

167
00:13:37.720 --> 00:13:43.759
the proxies versus using signals. I
agree with that. I well, and

168
00:13:43.759 --> 00:13:48.840
I'll start out with saying that when
I wrote an early version of his act,

169
00:13:48.639 --> 00:13:54.720
I used you know, the proxies. Two I guess I'll start off

170
00:13:54.759 --> 00:13:58.120
with the fact that I didn't start
with this transpiler compiler, so I was

171
00:13:58.120 --> 00:14:01.679
trying to just make a way to
write code that was nicer to write,

172
00:14:03.120 --> 00:14:05.440
and then eventually I ran, you
know, just ran into some obstacles and

173
00:14:05.480 --> 00:14:09.720
walls where I was like, that's
okay, and the proxies are good,

174
00:14:11.279 --> 00:14:13.320
but I also saw a lot of
hot code running through it, and that

175
00:14:13.399 --> 00:14:16.120
might just be a skill issue on
my part, Like I wasn't maybe doing

176
00:14:16.159 --> 00:14:22.159
something right, but everything was running
through this proxy like a lot, and

177
00:14:22.240 --> 00:14:24.000
so I went I went away from
that, and now I'm not using proxies.

178
00:14:24.000 --> 00:14:30.399
I'm actually just writing or transpiling the
code into keetters and setters and updates

179
00:14:30.399 --> 00:14:35.879
and subscribers and things of that nature. Okay, yeah, with the two

180
00:14:35.919 --> 00:14:39.399
way data binding and one way data
flow. I know, like in your

181
00:14:39.480 --> 00:14:43.000
view when you're in components, it's
generally have props to pass down. Then

182
00:14:43.039 --> 00:14:46.639
you in a mid event, you
know, if you want to change from

183
00:14:46.639 --> 00:14:50.240
a child, doctuparent, then you
admitted event and catch the event and then

184
00:14:50.279 --> 00:14:52.000
you do your thing. But I
know within state, you know, within

185
00:14:52.279 --> 00:15:00.120
using ux you can use a mutate
a state and I'm already blanking on the

186
00:15:00.200 --> 00:15:03.559
term. You know, where you
can have a variable that's defined in the

187
00:15:03.559 --> 00:15:05.720
state in your component and when you
change it, it changes in state and

188
00:15:05.759 --> 00:15:11.080
vice versa. It's real easy to
to change that. I think it's you

189
00:15:11.120 --> 00:15:13.559
know, probably one way under the
under the hood, but it makes things

190
00:15:13.679 --> 00:15:18.799
very easy. Yes, and I
do know you know that you were talking

191
00:15:18.799 --> 00:15:22.559
about having to re render the whole
component versus just the particular variable. And

192
00:15:22.600 --> 00:15:26.240
what this does for you is exactly
that. Yep. You know, if

193
00:15:26.279 --> 00:15:28.480
I change a piece of static,
it's just cann change it right on my

194
00:15:28.559 --> 00:15:35.039
screen with no no update in play
or no re rendering of the whole component.

195
00:15:35.559 --> 00:15:39.360
Yep. So and then I'll go
down another route, and this is

196
00:15:39.440 --> 00:15:41.919
you know, one of my well
beaten horses just because of something that I

197
00:15:43.000 --> 00:15:46.320
use so much is I do a
lot of that also with something called inertia.

198
00:15:46.320 --> 00:15:52.480
Are you familiar with nursia jas not
very much? No, Okay,

199
00:15:52.879 --> 00:15:56.679
short version is it's sort of a
glue level between your front and your back

200
00:15:56.759 --> 00:15:58.960
end, and you can plug and
play your front end in your back end

201
00:16:00.080 --> 00:16:02.519
with you know, in the front
end you can use view reacts, belt

202
00:16:02.840 --> 00:16:07.159
on the back end you can use
Ruby, Larevell, Node whatever, And

203
00:16:07.200 --> 00:16:11.440
it basically just sort of a glue
layer that sits in between the two and

204
00:16:11.919 --> 00:16:17.399
hijack your post request, then uses
some headers and then you use all your

205
00:16:17.879 --> 00:16:21.360
route definition everything else that's done in
your back end, and it passes everything

206
00:16:21.399 --> 00:16:26.559
up as props into your component.
And so because it's hijacking the post request

207
00:16:26.559 --> 00:16:27.720
and saying no, don't do a
page reload, I'm just going to pass

208
00:16:27.759 --> 00:16:33.919
this data back and forth, it's
crazy fast and very efficient. And then

209
00:16:33.960 --> 00:16:38.360
you have you know, it has
some helper methods and they're like what's called

210
00:16:38.360 --> 00:16:41.679
the visit route visit where you can
do that just go okay, I want

211
00:16:41.679 --> 00:16:45.600
this data from the back end here
it comes on doing this update in my

212
00:16:45.639 --> 00:16:48.679
front end. So sort of another
variation from what I gather, and we

213
00:16:48.720 --> 00:16:53.679
haven't gotten into the details too much, it sounds like similar to what you're

214
00:16:53.720 --> 00:16:59.279
doing with resact, and that you
want to be able to just update certain

215
00:16:59.320 --> 00:17:04.920
things without the patre render because of
efficiency and speed. Yes, well there

216
00:17:04.960 --> 00:17:08.880
is a except for there is no
server component at all, so I'm not

217
00:17:10.319 --> 00:17:12.240
at this point. This framework is
all client signed render, just like the

218
00:17:12.240 --> 00:17:18.720
old days of the original, like
the way we would do React applications in

219
00:17:18.759 --> 00:17:23.359
a browser. So I mean you're
basically obiying on what standard like graph QL

220
00:17:23.440 --> 00:17:27.240
or standard rest s API from your
back end that you're communicating with exactly.

221
00:17:29.079 --> 00:17:32.680
Yeah. So yeah, I never
set out again because this is just kind

222
00:17:32.680 --> 00:17:36.799
of like a side pet project.
I definitely never set out to create a

223
00:17:36.839 --> 00:17:40.039
full stack framework. I was just
like, I want to play around with

224
00:17:40.079 --> 00:17:44.400
this idea that I have, and
that's what became Resact. And I'll be

225
00:17:44.440 --> 00:17:47.559
honest with you, I've got a
lot of mileage out of clients signed rendered

226
00:17:47.599 --> 00:17:51.519
apps even with re react, you
know. And I know that a lot

227
00:17:51.519 --> 00:17:55.039
of people and a lot of the
solutions that have been created today around next

228
00:17:55.079 --> 00:18:00.279
gs and server components and all that
stuff are solving real problems. They're just

229
00:18:00.319 --> 00:18:07.119
not solving problems that I've ever experienced. Are you sure they're solving real problems?

230
00:18:07.160 --> 00:18:12.200
Well, I guess I'm trying to
be nice about it. Oh yeah,

231
00:18:12.240 --> 00:18:21.200
I just I'm I'm I'm worn.
I'm very, very worn. It

232
00:18:21.359 --> 00:18:27.440
just feels like, you know,
the the idea, like the hope is

233
00:18:27.480 --> 00:18:32.160
that you know, we swing from
one extreme to the other and we say,

234
00:18:32.200 --> 00:18:33.880
okay, well, this extreme is
bad, this extreme is bad.

235
00:18:34.200 --> 00:18:37.480
Okay, maybe somewhere in the middle
is nice. But it's like we just

236
00:18:37.559 --> 00:18:42.359
keep on swinging from one extreme to
the other with more force. Yeah,

237
00:18:42.720 --> 00:18:49.720
yeah, no, this is like
there is a middle ground that is it's

238
00:18:49.799 --> 00:18:55.960
helpful. I actually feel the same
way. I feel like the pendulum just

239
00:18:56.039 --> 00:19:03.279
keeps swinging and it's gaining momentum.
It's not reducing a moment, and I

240
00:19:03.359 --> 00:19:06.960
just find myself in the middle quite
quite happily in the middle, and I

241
00:19:07.039 --> 00:19:10.880
just develop how I develop. And
so far, I haven't, you know,

242
00:19:10.960 --> 00:19:17.279
been in situations that required me to
really dive that hard into oh well

243
00:19:17.319 --> 00:19:22.240
we need next JSS and server components. I've played around, but I just

244
00:19:22.359 --> 00:19:26.160
lament it because like I know that, you know, people got upset about

245
00:19:26.160 --> 00:19:32.279
the the misconstrued sequel on the front
end. I think I think there is

246
00:19:32.400 --> 00:19:40.039
some risk there and in terms of
just when people don't have a clear conception

247
00:19:40.359 --> 00:19:44.359
of where things are separated, they
will eventually you put something in the wrong

248
00:19:44.400 --> 00:19:49.160
place. But it's just like from
my perspective, it's just been oh man,

249
00:19:49.359 --> 00:19:52.079
you know, like getting getting you
know, like say you got a

250
00:19:52.119 --> 00:19:56.920
Node package that or just you have
a JavaScript package and there's nothing Node specific

251
00:19:56.920 --> 00:20:02.640
about it. There's nothing React specific
about it. It's just JavaScript code,

252
00:20:02.680 --> 00:20:06.640
you know, it's just turning complete
JavaScript code. Okay, Well you got

253
00:20:06.680 --> 00:20:10.079
to get it to work in Node
and then and then you gotta like add

254
00:20:10.119 --> 00:20:15.079
little hacks so that it works with
Webpack. But now now there's ES built,

255
00:20:15.119 --> 00:20:18.079
So then then you got to refine
your hacks to work with ES built.

256
00:20:18.359 --> 00:20:21.000
And then they come out with next
and then it breaks again. And

257
00:20:21.039 --> 00:20:26.119
so now in some of this code, I have like six lines of boilerplate

258
00:20:26.200 --> 00:20:33.200
on either side, and all it's
doing is like it's like a UMD type

259
00:20:33.240 --> 00:20:37.319
wrapper. But it's like I don't
want to just transpile the whole file for

260
00:20:37.559 --> 00:20:45.400
just like using export syntax differently anyway, So that that's where my my lamentation

261
00:20:45.559 --> 00:20:51.960
comes from is having figured out like
the magic little one line snippet that'll work

262
00:20:52.000 --> 00:20:55.279
in every framework, and then next
comes out with the server side stuff,

263
00:20:55.279 --> 00:20:59.240
and then it gets detected as node
by the bundler, which causes it to

264
00:20:59.279 --> 00:21:02.920
want to use record, which causes
it to not want to obey the exports.

265
00:21:03.000 --> 00:21:08.160
And then that's that sort of thing, and you know state management related

266
00:21:08.200 --> 00:21:15.400
stuff where people are doing like like
they're they're building out a call to the

267
00:21:15.480 --> 00:21:21.359
database, which makes the front end
not like it can't be self contained because

268
00:21:21.359 --> 00:21:23.359
it's got the server code in it. But all it's doing is getting an

269
00:21:23.359 --> 00:21:27.279
option that could have been hard coded
or something like that. That's that's where

270
00:21:27.319 --> 00:21:30.240
I'm i. You know, maybe
there is a use case for it,

271
00:21:30.279 --> 00:21:34.359
but the things I've personally encountered,
I've only known that I've personally encountered them

272
00:21:34.400 --> 00:21:40.119
because of you know, the weird
stuff that's going on. That's like somebody

273
00:21:40.200 --> 00:21:42.359
just decided I gotta do this,
I got to do it, but they

274
00:21:42.359 --> 00:21:49.720
didn't. It's like Ian Malcolm from
Jurassic Park, just because you could anyway,

275
00:21:49.799 --> 00:21:56.319
I'm I'm curious, I am curious, why go with JSX. Well,

276
00:21:56.319 --> 00:22:00.640
I mean I guess you're transpiling anyway
because of the other stuff you're doing.

277
00:22:00.640 --> 00:22:06.799
But why JSX rather than template strings. Uh. You know, I've

278
00:22:06.799 --> 00:22:08.799
never been a huge fan of template
strings, and part of that is just

279
00:22:08.839 --> 00:22:15.440
because I've probably part of it is
because I've never committed fully to them.

280
00:22:15.759 --> 00:22:19.440
I know that there's some people out
there doing that and they really like it.

281
00:22:19.559 --> 00:22:25.640
I just never found that is ergonomic
as just being able to write my

282
00:22:25.759 --> 00:22:30.079
tags right in the right in the
return, and so that's just where that

283
00:22:30.119 --> 00:22:36.079
comes from. It's mostly personal preference. Okay, yeah, I mean ostensibly

284
00:22:36.079 --> 00:22:38.039
you could still write the tags right
in the return, it'd just be instead

285
00:22:38.039 --> 00:22:41.599
of a Parenthesi'd be using a tick
mark. Yeah, yep, exactly.

286
00:22:42.359 --> 00:22:48.759
But no, hopefully they come out
with the triple tick which will preserve white

287
00:22:48.799 --> 00:22:53.160
space the way that you'd expect it
to. Oh yeah, so yeah,

288
00:22:53.200 --> 00:22:57.480
if you right now, if you
use the single tick that you know with

289
00:22:57.519 --> 00:23:00.160
the code alignment, you're like,
I want this component to have the white

290
00:23:00.160 --> 00:23:03.640
space, like you know, straight
up and down where I've aligned it to

291
00:23:03.680 --> 00:23:08.839
the component with the indentation of the
component. Problem with the single tick is

292
00:23:08.880 --> 00:23:14.000
that it brings in all the white
space, all the way to the beginning

293
00:23:14.039 --> 00:23:19.880
of the page. Ye, the
triple tickspeck is two. Make it like

294
00:23:21.000 --> 00:23:27.279
with the triple quotes and or the
triple carrots and other languages, where it

295
00:23:27.279 --> 00:23:33.319
brings the white space to the level
of indentation of the function or component or

296
00:23:33.359 --> 00:23:37.039
whatever, wouldn't Yeah, that sounds
really interesting and really awesome. So if

297
00:23:37.039 --> 00:23:41.680
we get stuff like that, that
would definitely be great, because that's definitely

298
00:23:41.720 --> 00:23:45.920
a pain point when you have you're
trying to maintain white space with with single

299
00:23:45.960 --> 00:23:51.119
ticks, yeah, because then then
you almost need a transpiler just because you

300
00:23:51.200 --> 00:23:57.440
just you want your white space to
look right. Yep. Yeah, So,

301
00:23:57.640 --> 00:24:02.680
Zach, I probably good idea.
I think here to sort of walk

302
00:24:02.720 --> 00:24:07.079
through all the stuff you highlight on
the exact iocite, okay, and you

303
00:24:07.079 --> 00:24:08.920
know if there's something else we miss
because I asked some questions after you know,

304
00:24:10.000 --> 00:24:15.240
prousing that and what you're talking about
doing. I think I get what

305
00:24:15.279 --> 00:24:17.359
you're shooting for, what you're trying
to do, but I just want to

306
00:24:17.400 --> 00:24:22.240
make sure I understand before I ask
a stupid question. So so we talked

307
00:24:22.240 --> 00:24:26.799
about signals, right, Was there
anything more about signals and your use of

308
00:24:26.839 --> 00:24:34.079
signals? That you wanted to to
address. I guess we'd be getting starting

309
00:24:34.079 --> 00:24:41.200
into getting into like, uh,
I think we've covered most of it,

310
00:24:41.279 --> 00:24:42.880
but there's a piece that I guess
I want to cover a little bit of

311
00:24:42.920 --> 00:24:48.759
and that is the form handling aspect, and I think we've already touched on

312
00:24:48.799 --> 00:24:52.759
it already. But the data binding
example on form inputs, I think is

313
00:24:52.759 --> 00:24:57.720
one of the things that I found
I've never really cared for and React,

314
00:24:57.839 --> 00:25:03.200
and that is one thing that I
s to do differently in res Act,

315
00:25:03.279 --> 00:25:06.960
which is to have that idea of
two way data binding where you can just

316
00:25:07.000 --> 00:25:12.599
create your state variable and assign it
to the you know, the value of

317
00:25:12.680 --> 00:25:18.960
the input and not need the on
change handler. You can do that.

318
00:25:18.960 --> 00:25:22.559
That's an option because there's some reasons
that you may want to, but it's

319
00:25:22.640 --> 00:25:29.400
not required. And part of the
thing that has driven me the most nuts

320
00:25:29.400 --> 00:25:33.680
about that, and why I emphasized
on this is because when I realized that

321
00:25:34.720 --> 00:25:42.920
React was basically preventing the default action
when you type in a textbox essentially right,

322
00:25:42.960 --> 00:25:48.839
because if you type in a textbox
that has an on change of handler

323
00:25:48.839 --> 00:25:52.240
and you're not updating the state that's
in the value, nothing happens inside that

324
00:25:52.240 --> 00:25:56.599
textbox, right, And that was
just wild to me. I'm like,

325
00:25:57.200 --> 00:26:02.680
these are browser component or inputs,
elements, whatever you want to call them,

326
00:26:02.839 --> 00:26:07.680
that have had state management built in
for as long as they've been around.

327
00:26:07.839 --> 00:26:11.680
They have their own state management,
but React circumvents it. It says,

328
00:26:11.759 --> 00:26:12.839
no, we're going to have circumvent
it, and we're going to catch

329
00:26:12.839 --> 00:26:15.559
your keystrokes. We're going to update
the state, and then we're going to

330
00:26:15.640 --> 00:26:18.759
re render the whole thing, and
then we're going to update the value and

331
00:26:18.799 --> 00:26:22.880
that input so you see the keystroke
that you hit. And that has just

332
00:26:22.960 --> 00:26:26.799
driven me bokers for mostly out of
principle. It's not a performance thing,

333
00:26:26.839 --> 00:26:32.440
because I don't think I've ever actually
personally experienced a really bad performance issue with

334
00:26:32.519 --> 00:26:36.599
that whole cycle. But it just
hurts my soul a little bit to think

335
00:26:36.640 --> 00:26:41.839
that all that effort is being redone
in JavaScript when it's already taken care of

336
00:26:41.920 --> 00:26:47.759
for you in the browser. And
so one thing that resact does is not

337
00:26:48.960 --> 00:26:52.160
do that. Right. It will
capture the keystroke and it will make sure

338
00:26:52.160 --> 00:26:56.359
the state is maintained, but it
does not unless, of course, you

339
00:26:56.400 --> 00:26:59.119
add your own non change. If
you add your own on change, then

340
00:26:59.160 --> 00:27:03.160
it does that whole react cycle where
it's like, okay, prevent default,

341
00:27:03.160 --> 00:27:06.319
capture keystroke, do the thing you
want me to do, update the state,

342
00:27:06.359 --> 00:27:10.000
rerender the value. It does all
of that. But that's what it

343
00:27:10.039 --> 00:27:14.519
does anyway, when you do on
change in the browser in the first place.

344
00:27:14.680 --> 00:27:17.519
Correct, Yeah, you know,
I guess. I'm not one hundred

345
00:27:17.519 --> 00:27:19.519
percent sure how it works. And
in the actual native browser, like is

346
00:27:19.559 --> 00:27:26.920
it actually blocking you know, the
render of the value being displayed in the

347
00:27:26.960 --> 00:27:32.440
input when you press the keystroke or
does it display it and then on change

348
00:27:32.440 --> 00:27:36.119
happens or on input happens or whatever
your event is. I don't know,

349
00:27:36.799 --> 00:27:41.759
So let's see because you can.
It depends. It depends on how you

350
00:27:41.799 --> 00:27:44.359
do it, because there's on key
up, on key down, on change,

351
00:27:44.359 --> 00:27:47.960
on blur, and so you can
basically hijack any part of the life

352
00:27:47.960 --> 00:27:52.440
cycle, and you can hijacket in
different places. So depending on what you're

353
00:27:52.480 --> 00:27:56.599
trying to hijack, you can either
hijacket all the way at body dot document

354
00:27:56.759 --> 00:28:03.400
or I mean document dot body.
Some things have to be hijacked by the

355
00:28:03.480 --> 00:28:07.480
form. They won't propagate up all
the way to document dot body, so

356
00:28:07.480 --> 00:28:11.599
they have to be handled within the
form, and then some things have to

357
00:28:11.599 --> 00:28:18.920
be handled within the input. So
if you wanted the input to not show

358
00:28:19.000 --> 00:28:27.000
the keystroke that's being typed, I
don't remember where that has to get handled

359
00:28:27.160 --> 00:28:33.039
at. It could be all the
way up at document dot body, but

360
00:28:33.119 --> 00:28:37.240
I think it I think it would
probably happen sooner than that. But you

361
00:28:37.599 --> 00:28:41.960
you are in control. You can
choose where to attach the event handler,

362
00:28:41.119 --> 00:28:48.880
and depending on the event you have
control of whether that keypress will get displayed

363
00:28:48.960 --> 00:28:51.880
or not. Yeah, so that
is that is correct. And actually,

364
00:28:51.960 --> 00:28:53.000
as we've sitting here talked about it, I've been thinking about it. I'm

365
00:28:53.039 --> 00:28:56.680
like, yeah, that is basically
what I believe. If you do a

366
00:28:56.759 --> 00:29:00.079
non change and you just hit event
prevent a fault, I don't think the

367
00:29:00.160 --> 00:29:04.680
keystroke shows up. I think that's
enough. So whether or not where in

368
00:29:04.720 --> 00:29:08.440
that cycle that happens, I guess
is different. But as long as you're

369
00:29:08.480 --> 00:29:15.680
not calling event prevent default, then
the browser handles the life cycle of that

370
00:29:15.759 --> 00:29:19.279
keystroke and everything else, and you're
just doing something else with it. Uh

371
00:29:19.359 --> 00:29:26.759
in not necessarily in parallel, because
it's all synchronous, but you're not trying

372
00:29:26.799 --> 00:29:32.160
to take full control over that input, so to speak. So that's that's

373
00:29:32.160 --> 00:29:34.960
one thing that I just I wanted
to point out that I find interesting about

374
00:29:36.000 --> 00:29:40.240
REACT and has been something that just
out of principle, really, I don't

375
00:29:40.279 --> 00:29:45.440
have any other good reason than that
to take issue with it. That has

376
00:29:45.599 --> 00:29:48.759
just been the thing that I wanted
to make sure I did differently and resact

377
00:29:51.720 --> 00:29:55.079
well, I think one, there's
a lot a lot of thoughts here.

378
00:29:55.240 --> 00:30:00.480
So given given that we're reaching the
limit of hardware we are, you know,

379
00:30:00.559 --> 00:30:07.160
Apple's M one was amazing, and
then the M two is five ten

380
00:30:07.200 --> 00:30:14.680
percent better, and the M three
is like another five ten percent better,

381
00:30:14.759 --> 00:30:18.279
you know, thirty percent better on
the things that they actually got wrong the

382
00:30:18.319 --> 00:30:22.960
first go around, and we're able
to optimize, but we're not looking towards

383
00:30:22.000 --> 00:30:29.400
a future where every year we're having
an M one leap in CPU capability,

384
00:30:29.400 --> 00:30:32.400
and the laws of physics dictate that, you know, we're at the end

385
00:30:32.440 --> 00:30:34.960
of the S curve. We're we're
at the trailing end where we're approaching the

386
00:30:36.039 --> 00:30:40.319
limit of what computers is. So
software has to get better because software is

387
00:30:40.359 --> 00:30:45.720
where we can literally get tens of
thousands of times more performance, especially you

388
00:30:45.759 --> 00:30:55.200
know in the web, right yep. So when you when you look at

389
00:30:55.240 --> 00:31:00.960
the way that things have gone,
it seems like component mania. And my

390
00:31:00.000 --> 00:31:04.880
main, my main canonical gripe is
the sign up form on a website,

391
00:31:04.920 --> 00:31:07.839
like you want to subscribe to a
newsletter because you want to know when a

392
00:31:07.839 --> 00:31:11.759
product is going to be available or
something like that, and it doesn't work.

393
00:31:11.799 --> 00:31:15.480
It's like you put in your email, you click submit and it doesn't

394
00:31:15.480 --> 00:31:19.240
work, Like why can't this work? And it's and it's because you know,

395
00:31:19.279 --> 00:31:23.200
instead of having input equals email like
what you show here in your your

396
00:31:23.559 --> 00:31:26.319
example, you know, input type
equals email, like that would work.

397
00:31:26.359 --> 00:31:32.599
That does the validation You can tack
on required, you know, and it'll

398
00:31:32.640 --> 00:31:34.680
hand, it'll do all the things. But people, people, basically,

399
00:31:34.720 --> 00:31:37.400
you know, they have these components
and then instead of an input field,

400
00:31:37.440 --> 00:31:41.960
it's like a thousand divs and then
every single one of those events is being

401
00:31:42.079 --> 00:31:48.680
re implemented in the component stack rather
than letting the browser handle it. So

402
00:31:48.720 --> 00:31:53.279
it seems like, you know,
we we have to get back to letting

403
00:31:53.319 --> 00:32:02.920
the browser do what it does well
rather than re implementing it in a way

404
00:32:02.960 --> 00:32:09.759
that is like literally literally prevents the
business objective from from being fulfilled depending on

405
00:32:10.920 --> 00:32:15.640
you know, the thing like like
one of the things you see most often.

406
00:32:15.680 --> 00:32:17.960
I don't know if you noticed this, but on an HTML form for

407
00:32:19.039 --> 00:32:21.720
people that are old enough, if
you hit enter, it'll submit the form.

408
00:32:21.839 --> 00:32:27.559
Right, most websites today that won't
work anymore. Nope, And this

409
00:32:27.640 --> 00:32:31.200
is because of this like componentization and
the hijack and everything. So I see,

410
00:32:31.720 --> 00:32:36.319
like I love seeing in your example
that it's like, hey, we're

411
00:32:36.319 --> 00:32:39.519
going to use an input like a
literal HTML input, and we're just going

412
00:32:39.559 --> 00:32:44.839
to do type equals email and that's
going to do stuff for us. But

413
00:32:44.880 --> 00:32:51.039
I am a little curious about,
Like, so you also have this validator

414
00:32:51.079 --> 00:32:55.599
input and it looks like it's exactly
the same as an input, Like there's

415
00:32:55.640 --> 00:33:00.680
no proprietary or API specific fields,
like we're required is HTML, type is

416
00:33:00.839 --> 00:33:06.160
HTML, name is HTML, placeholder
is HTML? Like all of that's just

417
00:33:06.319 --> 00:33:10.119
HTML, but it's got this capital
I in there to signify that it's like

418
00:33:10.119 --> 00:33:15.759
a special component. So like how
much of the underlying HTML is it using

419
00:33:15.759 --> 00:33:21.640
and what's the difference that you're using
that's not HTML and why So in this

420
00:33:21.680 --> 00:33:25.160
particular example, I am hiding a
lot, right because obviously you're not seeing

421
00:33:25.200 --> 00:33:29.480
the label, but I think there's
a label prop and I don't even I'm

422
00:33:29.480 --> 00:33:31.279
not actually looking at the example now
and I'm not even seeing the label prop,

423
00:33:32.400 --> 00:33:39.240
but there is, and it will
do a very simple div wrapper with

424
00:33:39.279 --> 00:33:44.880
a label in the input. And
then of course the magic is that there

425
00:33:44.960 --> 00:33:47.960
is some events that are tied to
it as far as catching your keystrokes.

426
00:33:49.480 --> 00:33:52.440
If you wanted to do masking,
or if you're doing any kind of validation

427
00:33:52.599 --> 00:33:58.160
of that sort, then it will
do that, you know, in ways

428
00:33:58.160 --> 00:34:00.279
that the browser currently doesn't support us, Like right now, I'm not aware

429
00:34:00.319 --> 00:34:06.160
of the browser supporting the ability to
do like a phone number mask. So

430
00:34:06.480 --> 00:34:12.599
that's one thing that you can do
with this this component. And I think

431
00:34:12.960 --> 00:34:21.199
there's another piece where the validation without
job descript anyway, it's limited, right,

432
00:34:21.320 --> 00:34:24.159
Like you do the type email and
you get a lot, but if

433
00:34:24.199 --> 00:34:28.960
you want to do anything more than
stuff like type email, you got to

434
00:34:29.119 --> 00:34:34.480
branch out. Yeah, I see
the mask option, and I see the

435
00:34:34.559 --> 00:34:37.440
data accept now HTML, I don't
think it's called data accept, but it

436
00:34:37.440 --> 00:34:40.760
does have the option for putting in
a regular expression that has some confines,

437
00:34:40.840 --> 00:34:45.960
but you know, like you get
regular expressions type stuff so I'm particularly interested

438
00:34:45.039 --> 00:34:51.039
in the email example, like would
I what behavior would be different if I

439
00:34:51.119 --> 00:34:54.880
use a lowercase I rather than an
uppercase I on that input for the for

440
00:34:54.920 --> 00:35:00.880
the email example, uh, none. If you wanted to Zach, absolutely,

441
00:35:00.000 --> 00:35:04.920
let you just do it basic HTML
form that will submit on entered,

442
00:35:05.280 --> 00:35:08.280
so you can go all the way
back to the original just use the broser

443
00:35:08.480 --> 00:35:15.480
In fact, rezact is only involved
in that example with the email in the

444
00:35:15.519 --> 00:35:20.880
fact that the it's wrapped in that
capital F form and so when you hit

445
00:35:20.920 --> 00:35:25.039
submit, it is running some JavaScript
to grab the values from your form,

446
00:35:25.400 --> 00:35:29.599
turn it into Adjason object that you
can then do whatever you want, right

447
00:35:29.639 --> 00:35:31.559
because like in a client side rendered
app, that's how you do that.

448
00:35:31.599 --> 00:35:36.480
You grab ad Jason blob, you
ship you know, send a request off

449
00:35:36.480 --> 00:35:40.920
to the server, get a response, do something, update UI. That's

450
00:35:42.199 --> 00:35:45.840
all completely optional. With rezact,
you don't have to do any of that,

451
00:35:45.400 --> 00:35:51.039
and resact will get out of your
way if you never use hardly any

452
00:35:51.039 --> 00:35:53.840
of these functions and the only thing
that you're really doing is just basic HTML.

453
00:35:54.320 --> 00:36:00.840
Your your your Jason bundle, a
Jason JavaScript bun that gets shipped to

454
00:36:00.880 --> 00:36:06.960
the client is just incredibly tiny it's
actually smaller than us well, spelt four.

455
00:36:07.199 --> 00:36:09.320
We'll see how Spelt five is.
They're claiming that it's even smaller than

456
00:36:09.360 --> 00:36:15.199
spelt. They're claiming spelt by five
is smaller than Spelt four. So we'll

457
00:36:15.199 --> 00:36:19.800
see when that actually comes out how
much smaller it actually is, which is

458
00:36:19.840 --> 00:36:27.599
impressive because it's already pretty small.
Well, I guess my number one question

459
00:36:27.639 --> 00:36:30.559
on that is, or the number
one gripe that I see people make that

460
00:36:30.639 --> 00:36:37.239
I think is a pretty fairly legitimate
gripe, is that when you use required

461
00:36:37.480 --> 00:36:42.360
on an input, there's you can
style an input to be almost whatever you

462
00:36:42.440 --> 00:36:46.639
want. There have been some quirks
now and then with the auto complete changing

463
00:36:46.639 --> 00:36:51.280
the font size back to the original
font size, but I think that's mostly

464
00:36:51.320 --> 00:36:54.840
been worked out by the browsers by
now. But the required has a pop

465
00:36:54.960 --> 00:37:05.199
up that you can't to my knowledge
today, you still can't customize the look

466
00:37:05.239 --> 00:37:09.440
and feel of the pop up that
you get with the required and so it

467
00:37:09.480 --> 00:37:16.639
is by default. Is Rezact using
that same required or do you have some

468
00:37:16.679 --> 00:37:22.960
sort of custom pop up that I
can edit the CSS and make it look

469
00:37:22.320 --> 00:37:28.960
different. Yeah, no, we're
we're not using the built in browsers validation

470
00:37:29.119 --> 00:37:31.360
display if that's what you're referring to, Yeah, yeah, yeah, because

471
00:37:31.400 --> 00:37:35.440
it's so painful. It's so hard
to try to make that look the way

472
00:37:35.440 --> 00:37:38.280
you wanted to look. And I
have yet to meet a designer or a

473
00:37:38.280 --> 00:37:46.800
project manager that has ever just been
okay with the default browser's validation when it

474
00:37:46.800 --> 00:37:50.239
comes to you know, forem inbus, they all are like, Nope,

475
00:37:50.239 --> 00:37:52.480
here's the design. You need to
make it look like this when it validates,

476
00:37:52.960 --> 00:37:57.480
and so you have to you have
to do that. I think that's

477
00:37:57.519 --> 00:38:02.960
a pity though, because this is
a luxury that Apple and Android developers get.

478
00:38:01.920 --> 00:38:07.960
You don't say, well, we're
gonna publish this as a native iPhone

479
00:38:07.960 --> 00:38:13.079
app, but we think iPhone sucks
and everything it does is wrong. So

480
00:38:13.400 --> 00:38:16.599
we're gonna redesign everything. Instead of
looking like an iPhone app, it's gonna

481
00:38:16.639 --> 00:38:22.559
look like something no one's ever seen
before. But that seems to be very

482
00:38:22.880 --> 00:38:27.760
very That seems to be the more
common approach to the browser is like everything

483
00:38:27.760 --> 00:38:30.280
about the browser is wrong, it
all sucks. We're gonna eliminate all the

484
00:38:30.280 --> 00:38:34.320
design that goes into Chrome, and
rather than a Chrome user having a Chrome

485
00:38:34.400 --> 00:38:37.760
experience, we're gonna give them some
random experience that they've never had before,

486
00:38:37.880 --> 00:38:42.400
which I think is a real pity. Like I agree, I agree that

487
00:38:42.519 --> 00:38:52.119
the validation pop up is not the
ideal for every single scenario. It's not

488
00:38:52.199 --> 00:38:59.239
like ninety percent of people want this
as like the height of perfection. But

489
00:38:59.280 --> 00:39:04.480
I also so the other way around. I just have our time seeing ninety

490
00:39:04.519 --> 00:39:08.760
percent incent of people saying, oh, this is completely unusable. This doesn't

491
00:39:08.760 --> 00:39:15.079
communicate anything valuable to the user.
It's it's too difficult to be understood.

492
00:39:15.159 --> 00:39:20.079
It'll just confuse people. I don't
really see that either, So I get

493
00:39:20.119 --> 00:39:24.840
the argument for wanting to have it
be customed, but I also think that

494
00:39:24.920 --> 00:39:29.360
people just need to calm down a
little bit and treat it more like they

495
00:39:29.400 --> 00:39:31.639
would an iOS app, and say, you know what, Apple did research

496
00:39:31.679 --> 00:39:36.880
into this, they figured it out. We're not going to rewrite every single

497
00:39:36.920 --> 00:39:40.920
component that Apple ever created. And
likewise, you know, the Chrome team,

498
00:39:42.320 --> 00:39:45.519
they've done some research. You know
they've done a decent job. It's

499
00:39:45.599 --> 00:39:49.920
not bad and unless it's like really
part of your And also, this isn't

500
00:39:49.920 --> 00:39:53.119
even on the happy path, right, I mean, you're talking about somebody

501
00:39:53.480 --> 00:39:58.559
types in a phone number. Wrong
do they need it to be in your

502
00:39:58.679 --> 00:40:02.320
company colors in order for them to
understand that they need to fix a missing

503
00:40:02.360 --> 00:40:07.480
digit. Yep. No, I
actually went down this path with a you

504
00:40:07.519 --> 00:40:10.760
know, it was supposed to be
just a simple form, and my job

505
00:40:10.840 --> 00:40:14.719
is about like sometime last year,
and I was like, well, it's

506
00:40:14.760 --> 00:40:16.599
just a simple form. You know, ninety percent of the time, these

507
00:40:16.599 --> 00:40:20.880
people are just going to fill it
out right the first pass. Well,

508
00:40:21.440 --> 00:40:25.480
my you know quality in PM and
designer. They get involved and they start

509
00:40:25.519 --> 00:40:29.079
poking at it, and they're like, well, this is what happens when

510
00:40:29.519 --> 00:40:31.880
when I don't do it right.
When I when I do it wrong intentionally,

511
00:40:34.000 --> 00:40:35.760
I don't like the way that looks, I don't like the way that

512
00:40:35.760 --> 00:40:37.000
feels, I don't like the way
that works. Can you change it to

513
00:40:37.039 --> 00:40:39.840
do it? You know all this
custom stuff. And so that's where that

514
00:40:39.880 --> 00:40:44.840
came from. Was exactly that.
I'm like, Okay, that's I guess

515
00:40:44.840 --> 00:40:47.840
how this is going to go.
And to be fair, I haven't used

516
00:40:49.159 --> 00:40:52.199
Resact in that application, but I
am using the same. I ended up

517
00:40:52.519 --> 00:41:00.320
creating the validation engine for that project
that I'm now using also in res Act.

518
00:41:00.599 --> 00:41:07.239
So it's like a completely customed from
the ground up written validation and masking

519
00:41:07.280 --> 00:41:13.440
engine, and you can go ahead, well, and you can do exactly

520
00:41:13.440 --> 00:41:17.079
what we're talking about as far as
uh, you know, designing and CSS

521
00:41:17.280 --> 00:41:21.960
your error messages and how they display, when they display, how will they

522
00:41:22.000 --> 00:41:29.480
display all of that to your heart's
content, but absolutely disabling the browser's native

523
00:41:30.559 --> 00:41:37.119
you know, responses to those validations. So with the examples that you gave

524
00:41:37.239 --> 00:41:40.679
here, I think they're actually really
really good examples to to bring up some

525
00:41:40.679 --> 00:41:45.360
some talking points. I love the
idea of the mask, like from from

526
00:41:45.199 --> 00:41:49.519
the the idyllic perspective, like we
live in the world of fairy tales and

527
00:41:49.599 --> 00:41:52.880
rainbows. Couldn't we just provide a
mask equals like you show here in the

528
00:41:52.920 --> 00:42:00.079
example and everything just works and is
wonderful. And then the most simplistic case,

529
00:42:00.199 --> 00:42:05.039
like you know what you've showed here, it seems like that could work.

530
00:42:05.079 --> 00:42:07.880
If all we're going to ever accept
is US phone numbers, yep,

531
00:42:08.400 --> 00:42:12.639
then we can use this mask as
you've defined, which is the case for

532
00:42:12.760 --> 00:42:15.559
most people in the U Ied States. Most people like they might have in

533
00:42:15.599 --> 00:42:20.000
their heads they're going to scale the
international but they're not yep, right,

534
00:42:20.199 --> 00:42:24.920
So so this is actually like it's
really convenient, it's it communicates really effectively,

535
00:42:25.400 --> 00:42:30.559
Like so much about the experience of
this in the ideal world is perfect,

536
00:42:30.679 --> 00:42:34.360
Like what what more could we ask
for? You know, so to

537
00:42:34.599 --> 00:42:39.000
for people that are listening audio,
it's parentheses with underscores in between a space,

538
00:42:39.079 --> 00:42:43.079
some underscores, a space, some
underscores, and I'm imagining what that

539
00:42:43.199 --> 00:42:46.599
means is that the underscore means that
as the user types, it's going to

540
00:42:46.679 --> 00:42:51.320
fill in the value so that the
value will be visible to the user as

541
00:42:51.360 --> 00:42:54.880
they type with that formatting and space. Yep. And you know, if

542
00:42:54.960 --> 00:43:00.199
anybody's you know, on the site, just below that code example, is

543
00:43:00.199 --> 00:43:04.360
the actual form and you can see
that in action as you type in the

544
00:43:04.599 --> 00:43:07.559
in the in the phone field.
Oh I didn't even I didn't even notice.

545
00:43:07.719 --> 00:43:13.840
No, uh yeah. But then
but then it's like, okay,

546
00:43:13.880 --> 00:43:19.119
well, realistically, we're only going
to be doing us you know, email

547
00:43:19.159 --> 00:43:22.440
address or phone numbers, so we
could we could actually we could let that

548
00:43:22.480 --> 00:43:27.679
one slide that it's not going to
handle two hundred different formats for phone number

549
00:43:27.679 --> 00:43:31.159
because we're practical, right not,
We're not. We're not having a delusion

550
00:43:31.199 --> 00:43:36.119
that we're gonna go plant scale with
our if the were our startup app here,

551
00:43:36.280 --> 00:43:39.920
okay, but now the next one
is the one where it just it

552
00:43:39.960 --> 00:43:47.199
breaks utterly because I am going to
have people that have visa discover an American

553
00:43:47.239 --> 00:43:53.079
Express. So your credit card validator
has the the sixteen dots, and do

554
00:43:53.199 --> 00:43:58.320
the dots mean that it turns into
an asterisk as they type or it stays

555
00:43:58.320 --> 00:44:00.599
a dot or what does the dot
mean? There his mask and mask slots.

556
00:44:01.320 --> 00:44:05.880
So it actually is the dots in
this particular case, the mask slots.

557
00:44:06.159 --> 00:44:09.400
So it's saying, you know,
the dots are the placeholder. Is

558
00:44:09.440 --> 00:44:12.960
what those end up being for when
you type in a number, and so

559
00:44:13.000 --> 00:44:16.400
it doesn't actually display anything while you
type. It just shows the numbers,

560
00:44:16.400 --> 00:44:21.440
and then as you tie, you'll
see the space, you know, be

561
00:44:21.599 --> 00:44:25.440
inserted as you type Okay, now
I'm trying that, okay, and then

562
00:44:25.880 --> 00:44:29.400
you know and yeah, and so
you see the mid length is fifteen in

563
00:44:29.440 --> 00:44:32.559
the max of sixteen. And I
actually I actually work in payments and it's

564
00:44:32.599 --> 00:44:37.039
all US based payments that we currently
work with merchants in the US. We

565
00:44:37.039 --> 00:44:44.119
don't work with international merchants. So
we have been doing fifteen to sixteen digit

566
00:44:44.800 --> 00:44:50.719
card inputs as long as they've been
in business, and that has not been

567
00:44:50.760 --> 00:44:53.079
a there's never been a request so
far from someone say well, hey,

568
00:44:53.519 --> 00:44:57.960
I need you to accept the nineteen
digit version of the twenty digit version because

569
00:44:57.960 --> 00:45:00.639
there's new standards that are coming out
about how you we may end up with

570
00:45:01.639 --> 00:45:07.719
card numbers that are longer than that. Oh, the validation for the actual

571
00:45:07.800 --> 00:45:13.480
check will actually work with either the
fifteen digit version for American Express or the

572
00:45:13.519 --> 00:45:20.920
sixteen digit version for Visa MasterCard and
discover. The algorithm that's used to basically

573
00:45:21.039 --> 00:45:27.039
validate a card number is very very
simple. It's like CRC thirty two or

574
00:45:27.119 --> 00:45:31.000
something. It's basically something along them
lines. Yeah, and so it's not

575
00:45:31.079 --> 00:45:35.199
even actually telling you that the card
number is real. It's just telling you

576
00:45:35.239 --> 00:45:37.760
that it passes that check and it
could be real, and so you submit

577
00:45:37.800 --> 00:45:40.440
it and then from there, you
know, it goes through the card network

578
00:45:40.480 --> 00:45:45.000
brands and all that, and then
they actually will return a response if it's

579
00:45:45.079 --> 00:45:51.639
real or not so. But the
mask there's I think there's four different,

580
00:45:51.719 --> 00:45:55.000
no, three different formats for a
credit card if i e I remember on

581
00:45:55.039 --> 00:45:59.239
the top of my head. But
American Express, yeah, starts with five

582
00:45:59.320 --> 00:46:04.400
digits. Visa does four, visa
maestro master, I'll do four and then

583
00:46:04.480 --> 00:46:07.960
discover is that I don't remember is
it four or five? Anyway. So

584
00:46:08.440 --> 00:46:15.119
but the point is like, realistically, this mask value breaks down really quickly

585
00:46:15.159 --> 00:46:19.320
because now if I wanted to display
somebody's American Express card, it's going to

586
00:46:19.400 --> 00:46:22.159
mask it in a weird way that's
unfamiliar to them, right yep. So

587
00:46:22.280 --> 00:46:27.679
in this example, you're absolutely right, it will break right away. In

588
00:46:27.719 --> 00:46:30.519
our card fields that we have where
I work, we do extra work to

589
00:46:30.559 --> 00:46:35.320
detect that first digit. I think
it's three, and it's like, if

590
00:46:35.320 --> 00:46:39.760
it's three, it's American Express,
and so we will update the mask to

591
00:46:39.800 --> 00:46:43.760
fit that format. When you as
soon as you hit that first key,

592
00:46:43.760 --> 00:46:45.679
strug you hit three. Now,
this example isn't going to do that,

593
00:46:46.159 --> 00:46:50.320
but in our other fields at work, that's how that works. You hit

594
00:46:50.320 --> 00:46:54.079
three and it goes. It changes
the format of the mask. So my

595
00:46:54.320 --> 00:47:00.239
question there is when you when you
look at a situation like this, I

596
00:47:00.320 --> 00:47:05.119
know that for the purpose of an
example, everybody wants to see this cute

597
00:47:05.159 --> 00:47:09.840
little example that does a bunch of
magic, But like the reality starts to

598
00:47:09.880 --> 00:47:15.639
break things down pretty quickly. There's
I think there's I don't know how many

599
00:47:16.000 --> 00:47:20.440
types of inputs where where like the
way you've shown it here, which is

600
00:47:20.480 --> 00:47:22.000
so idyllic, like this is what
I wish we could have, right,

601
00:47:22.880 --> 00:47:29.079
I don't know how many inputs there
are that actually are simple enough that that

602
00:47:29.119 --> 00:47:31.840
they can they can work this way. So my question is do you think

603
00:47:31.960 --> 00:47:37.079
that it is, like, is
there really a significan advantage just striving for

604
00:47:37.119 --> 00:47:42.599
this kind of template like syntax that
you know it looks so good versus just

605
00:47:43.280 --> 00:47:47.599
yeah, just do it in JavaScript
ninety percent of the time. You know.

606
00:47:47.719 --> 00:47:52.719
That's a great point, because you're
right obviously with the American Express example,

607
00:47:52.719 --> 00:47:54.519
that's what we're talking about, right, is now it's no longer this

608
00:47:54.599 --> 00:48:00.360
nice example mask equals you know,
sixteen dots with spaces is no longer mask

609
00:48:00.400 --> 00:48:05.440
equals sixty other spaces. It's mask
equals a signal, you know, and

610
00:48:05.440 --> 00:48:08.599
then you're updating that signal based on
and now you've got an unchange event or

611
00:48:08.639 --> 00:48:14.000
an on input event where you're looking
at while they're typing and deciding which mask

612
00:48:14.079 --> 00:48:19.639
to show. So you're right,
there is a breakdown there. But I

613
00:48:19.679 --> 00:48:24.360
really like personally the option to start
here, and then once I'm moved,

614
00:48:24.400 --> 00:48:30.559
you know, beyond or running into
the issues, I'd like to have something

615
00:48:30.639 --> 00:48:37.920
that facilitates that process of customization more
easily. And I think there is here,

616
00:48:37.960 --> 00:48:42.159
and I'm just not showing it.
Like I think the ability to move

617
00:48:42.239 --> 00:48:46.400
from this really idealic, simple example
into the complex scenarios that you're going to

618
00:48:46.480 --> 00:48:51.320
run into once you, you know, start actively having users use your stuff,

619
00:48:52.360 --> 00:48:55.920
I think is actually available, Like
you could really easily move from,

620
00:48:57.559 --> 00:49:01.519
you know, just from the simplistic
example of handling the American Express mask.

621
00:49:02.360 --> 00:49:08.599
It's it's not out of reach in
this in this framework. Okay, Well

622
00:49:08.599 --> 00:49:14.599
here's here's another thought that I was
just just thinking of. There's there's a

623
00:49:14.679 --> 00:49:17.800
number of things that are that are
very finite, right like, like everybody

624
00:49:17.800 --> 00:49:22.840
has to do them, and there's
very little variation and how we want to

625
00:49:22.880 --> 00:49:28.199
do them, even if we're really
artistically expressive, right Like the the error

626
00:49:28.280 --> 00:49:31.320
message falls a little bit outside of
that bounce because people just want to be

627
00:49:31.440 --> 00:49:39.719
so freaking artistically expressive. But displaying
a phone number or a credit card,

628
00:49:40.320 --> 00:49:45.840
there's I mean, we literally have
a list of internationalization for this, right

629
00:49:45.159 --> 00:49:52.880
Like you can there are standards that
specify this is the American way to format

630
00:49:52.960 --> 00:49:54.760
a phone number, this is the
European way to format a phone number.

631
00:49:54.840 --> 00:50:00.880
And there's not thousands or tens of
thousands, or hundreds of thousands or an

632
00:50:00.920 --> 00:50:04.320
infinite number of ways that you could
want to do it. There's i don't

633
00:50:04.320 --> 00:50:07.039
know, on the small end,
like three or four, and on the

634
00:50:07.039 --> 00:50:12.159
big end maybe a dozen or two. And then same thing with the credit

635
00:50:12.159 --> 00:50:15.400
card that that's even more constrained,
Like these credit card companies how they format

636
00:50:15.400 --> 00:50:19.360
their card is part of the brand, and it's basically you're down to do

637
00:50:19.360 --> 00:50:22.280
you want spaces? Do you want
dashes? So what do you what do

638
00:50:22.320 --> 00:50:29.360
you think about taking the opposite approach
saying you know what, it's a shame

639
00:50:30.079 --> 00:50:38.119
that browsers haven't decided on you know, type equals credit card. What about

640
00:50:38.159 --> 00:50:45.000
just bringing that full on into the
primitive of the system to say, hey,

641
00:50:45.000 --> 00:50:52.000
validator input handles credit card as a
type of input, and it handles

642
00:50:52.239 --> 00:50:55.800
phone numbers the type of input.
And your option is you pass in the

643
00:50:57.400 --> 00:51:00.000
you know, do you want the
space or do you want the dash?

644
00:51:00.079 --> 00:51:02.559
Do you want to mask the last
four or do you want or do you

645
00:51:02.599 --> 00:51:07.480
want to unmask the last four or
do you want to unmask the whole thing,

646
00:51:07.880 --> 00:51:10.599
like yeah, I mean there's literally
for credit cards, there's literally a

647
00:51:10.599 --> 00:51:15.320
PCI document that I mean you know
this because you you know, like there's

648
00:51:15.320 --> 00:51:19.199
a PCI document that tells you what
your options are, so you have a

649
00:51:19.880 --> 00:51:22.800
finite number of options that you could
just say I want it this way or

650
00:51:22.800 --> 00:51:27.199
that way and be done with it
and not have the artistic expression and not

651
00:51:27.360 --> 00:51:30.679
have to go and to do it
in JavaScript. Like I said, Oh,

652
00:51:30.679 --> 00:51:32.079
I would love that. Like I
think if there was a way to

653
00:51:32.159 --> 00:51:37.880
standardize this and have the browsers support
these various you know, permutations of the

654
00:51:37.880 --> 00:51:45.480
way that people are trying to do
inputs, especially in forms, then I

655
00:51:45.519 --> 00:51:50.679
would use it. But I I
don't know what that looks like. Like

656
00:51:50.960 --> 00:51:52.800
no, I mean, like you
you in your own framework, Like what

657
00:51:52.880 --> 00:51:57.320
if you just update your validator input
and say, hey, one of the

658
00:51:57.400 --> 00:52:00.800
key features is that we support something
that every single business on the planet wants,

659
00:52:01.079 --> 00:52:05.000
the ability to put in a credit
card. Sure, yeah, I

660
00:52:05.000 --> 00:52:10.079
could easily create a I can imagine
as you're talking how I could use and

661
00:52:10.079 --> 00:52:14.519
by the way, I should actually
step back and clarify that a lot of

662
00:52:14.519 --> 00:52:17.000
The code that is in this isn't
actually framework specific to resact. This is

663
00:52:17.039 --> 00:52:22.679
code that I could port to and
I have. It's actually currently existing in

664
00:52:22.679 --> 00:52:28.719
my work infrastructure code God bless you. It is, you know, just

665
00:52:28.760 --> 00:52:32.719
a basic library, right, So
there's nothing special about this code that makes

666
00:52:32.719 --> 00:52:37.519
this happen. And so as you're
sitting you're talking, I can imagine how

667
00:52:37.519 --> 00:52:42.960
I could create a component that would
handle all of what you're saying. As

668
00:52:42.960 --> 00:52:45.880
far as the internationalization, I think
there's some question marks around, like,

669
00:52:45.880 --> 00:52:50.079
well, what do you want that
to look like? Should the selection should

670
00:52:50.159 --> 00:52:54.760
auto detect as you type? Should
you be able to select you know,

671
00:52:54.840 --> 00:53:01.480
your prefix or whatever, and then
that automatically updates and changes the format things

672
00:53:01.480 --> 00:53:05.920
of that nature. So there's some
questions around what that should look like.

673
00:53:06.639 --> 00:53:09.360
But I can imagine how I could
make a like a component or an input

674
00:53:09.360 --> 00:53:13.719
that would would handle that, that
you could consume and say, hey,

675
00:53:13.800 --> 00:53:20.679
here's this component that does phone numbers, which is kind of wild because we're

676
00:53:21.800 --> 00:53:24.440
geared to just download an NPM package
for stuff like that, and so I

677
00:53:24.440 --> 00:53:29.800
can imagine there might even be an
NPM package for a component for a phone

678
00:53:29.880 --> 00:53:31.679
number input. I bet if we
just did a quick search right now,

679
00:53:31.679 --> 00:53:38.039
we'd find one. I'm sure we'd
find dozens. But the finding a finding

680
00:53:38.039 --> 00:53:45.239
one that works reliably and that doesn't
require having a particular you know, finding

681
00:53:45.280 --> 00:53:49.840
something that just works the way the
browser works, that I think is not

682
00:53:49.960 --> 00:53:55.079
going to be as as popular as
like an entire UI kit, right,

683
00:53:57.079 --> 00:54:00.079
And that's that's what I'm talking about, is like if I can style an

684
00:54:00.079 --> 00:54:07.280
input and you can just put the
stuff in the input, yeah, and

685
00:54:07.320 --> 00:54:09.760
I and and I yeah. The
question about well, one thing that I

686
00:54:09.800 --> 00:54:14.840
hate that I absolutely hate, and
it looks like you've taken care to solve

687
00:54:14.880 --> 00:54:19.159
and what you've created is if I
can't paste in a value like I paste

688
00:54:19.199 --> 00:54:22.280
in something that has dashes where it
expects dots or dots where it expects dashes,

689
00:54:22.599 --> 00:54:25.800
and then it just like pasts in
two characters and then stops and it

690
00:54:25.840 --> 00:54:30.039
pastes them in wrong because it has
like the leading one so it's like one

691
00:54:30.119 --> 00:54:37.280
eight zero, and then it stops. It helps. That worked? Did

692
00:54:37.280 --> 00:54:42.000
it work? You were able to
post in a number, paste in a

693
00:54:42.079 --> 00:54:45.880
number with dashes and that and that
worked. I didn't try I'm gonna I'll

694
00:54:45.920 --> 00:54:49.639
try it right now. Yeah,
I'm dying Oh, I'm like curious to

695
00:54:49.639 --> 00:54:54.360
see what happens here. We're all
on the edge of our seats waiting for

696
00:54:54.480 --> 00:55:02.440
AJ's copy paste test. Let's see. Okay, so it did it did

697
00:55:02.480 --> 00:55:07.960
do the wrong thing if it starts
with a one, but your example didn't.

698
00:55:08.119 --> 00:55:10.960
If I just paste in with dashes, yes, it works. If

699
00:55:10.960 --> 00:55:15.159
I don't put the leading one,
it works. I'm gonna try with dots

700
00:55:15.159 --> 00:55:22.280
as well and see how that goes. Works. So like that, that's

701
00:55:22.559 --> 00:55:30.199
that. The only thing that I
would wish differently is that it kept the

702
00:55:30.320 --> 00:55:35.679
leading or the trailing character so that
when I go back to delete the one

703
00:55:35.880 --> 00:55:43.840
that I it kept, it kept
the trailing five. Gotcha. Yeah,

704
00:55:43.960 --> 00:55:46.519
so there's some work there to be
done. I mean, I mean that's

705
00:55:46.519 --> 00:55:52.360
good. That's like, that's better
than the experience of ninety nine point Masking

706
00:55:52.719 --> 00:55:55.440
is so hard, Like it isn't
one of the hardest things to do right.

707
00:55:55.960 --> 00:55:59.239
And I'm not going to sit here
and say that I did it right,

708
00:55:59.320 --> 00:56:01.719
because I don't know. We're talking
about dashes and dots now whether or

709
00:56:01.760 --> 00:56:05.079
not those work and pacing. And
that's the first time I've ever thought to

710
00:56:05.119 --> 00:56:10.400
the test for that. So and
yeah, it's definitely a very very difficult

711
00:56:10.440 --> 00:56:22.880
thing to to implement, especially like
from scratch in JavaScript. So with resact,

712
00:56:23.239 --> 00:56:28.039
it sounds like this is something that
you know, you're not necessarily saying,

713
00:56:28.079 --> 00:56:30.639
hey, I think that this is
going to be the next hot framework.

714
00:56:30.679 --> 00:56:34.440
This is something that has personally brought
you value, has brought value to

715
00:56:34.480 --> 00:56:39.800
your clients, and that you you're
not sure if it brought value to your

716
00:56:39.800 --> 00:56:44.360
clients. Well, I don't have
any clients that I've used the framework with,

717
00:56:44.760 --> 00:56:47.880
so that's just so far, there's
a this is a zero user framework.

718
00:56:49.599 --> 00:56:52.360
I've got, you know, a
discord channel where some people were playing

719
00:56:52.400 --> 00:56:55.079
with it, and I think there's
one guy who's really interested in, you

720
00:56:55.079 --> 00:56:58.320
know, using it in a production
app that he was you know, had

721
00:56:58.320 --> 00:57:00.440
a vision for. But I'm one
guy and I tried to talk to him.

722
00:57:00.480 --> 00:57:02.760
I was like, hey, you
know, if you really are passionate

723
00:57:02.760 --> 00:57:06.639
about this and want to see this
work, let's get together, let's develop

724
00:57:06.679 --> 00:57:10.199
it and try to engage the community
to you know, participate. But he

725
00:57:10.280 --> 00:57:15.280
was like, no, no,
I'm not. He's like, I want

726
00:57:15.320 --> 00:57:17.599
you to do it all the work
and then I'll just use it. I'm

727
00:57:17.599 --> 00:57:22.320
like, okay, well I can't
make you any promises. So yeah,

728
00:57:22.360 --> 00:57:27.079
we have as far as I know, zero users of this framework. Okay,

729
00:57:27.119 --> 00:57:29.559
all right, so that's because you
want to use a syncle weight then

730
00:57:29.599 --> 00:57:34.760
instead of promises, is at it
well as far as the like, uh

731
00:57:37.320 --> 00:57:43.559
yeah, oh now I get it, Now I get it. Okay.

732
00:57:43.559 --> 00:57:46.159
So what's the moral of the story
then? Because you, like you,

733
00:57:46.159 --> 00:57:51.280
you did something interesting, you tried
out some stuff, you created something that

734
00:57:51.360 --> 00:57:57.719
seems to be of you know,
pretty high value in terms of well value

735
00:57:57.800 --> 00:58:00.039
value would we'd have to throw that
to the market with the market decides the

736
00:58:00.079 --> 00:58:02.760
value of it is. But it's
I mean, it seems like it's high

737
00:58:02.880 --> 00:58:08.880
quality, thank you, So but
what like, what's what's the moral of

738
00:58:08.920 --> 00:58:14.719
the story with this? You know, you created a framework and then what

739
00:58:15.000 --> 00:58:21.400
so you know, I've just from
the time that I last wrote any code

740
00:58:21.440 --> 00:58:25.119
for this and committed, I got
just slammed. I'm super busy, and

741
00:58:25.159 --> 00:58:29.400
so I haven't had any time to
dedicate to the project. But it is

742
00:58:29.440 --> 00:58:35.119
my intention to continue building on this
and using it at the very least in

743
00:58:35.119 --> 00:58:39.360
my own personal projects. It's something
that I find useful. So for sure

744
00:58:39.599 --> 00:58:45.000
that's there's value there, just in
that regard there has been some people who

745
00:58:45.039 --> 00:58:50.679
have expressed interest, and so there
may be some value. But is my

746
00:58:50.800 --> 00:58:53.239
goal right now to take over you
know, you know, become the next

747
00:58:53.280 --> 00:58:57.679
react or the next Svelt or anything
like that nature. I'm not that grandiose.

748
00:58:58.599 --> 00:59:01.679
I'm having a lot of fun building
it and playing with it, and

749
00:59:01.760 --> 00:59:07.320
if other people find joy in it, then that's just icing on the cake.

750
00:59:08.119 --> 00:59:20.000
So what what what's the most valuable
thing about this experience to share with

751
00:59:20.039 --> 00:59:24.920
our listeners. Oh, the honestly, the most valuable thing, you know,

752
00:59:25.480 --> 00:59:30.400
is just the act of trying to
build something like a framework. You

753
00:59:30.440 --> 00:59:37.199
go through all of the mental gymnastics
that many smarter people than me before me

754
00:59:37.599 --> 00:59:42.199
had to go through to come up
with stuff like this, and so you

755
00:59:42.320 --> 00:59:46.800
get a really valuable insight into the
process and you only get that if you

756
00:59:46.840 --> 00:59:52.039
try to build your own front and
framework. And so that's what this started

757
00:59:52.039 --> 00:59:58.880
out as in the fact that it
became somewhat valuable to me was an accident,

758
00:59:59.280 --> 01:00:04.880
to be completely honest, And yeah, that's the takeaway, Like,

759
01:00:04.920 --> 01:00:12.760
I'm just struggling with the same struggles
at least some of them that framework authors

760
01:00:12.800 --> 01:00:15.480
today have to struggle with. Uh, And it brings you a level of

761
01:00:16.800 --> 01:00:22.480
yeah, maybe compassion for some of
those authors because they a lot of them

762
01:00:22.639 --> 01:00:29.280
are not getting paid to do any
of that. Well, and I'm not

763
01:00:29.280 --> 01:00:34.599
getting paid to do any of that
that either. So so let me see

764
01:00:34.639 --> 01:00:37.599
if I can summarize this. You
know, I've been listening to you and

765
01:00:37.639 --> 01:00:42.400
AJ talk for a while, and
you know, reading through the docs and

766
01:00:42.400 --> 01:00:44.639
and all this, and I'm looking
at you know, a lot of the

767
01:00:44.719 --> 01:00:49.840
stuff you mentioned I see already done
in view. For instance, you know,

768
01:00:49.880 --> 01:00:54.360
I'll give you an example reactive computations, yep, So where you have

769
01:00:54.519 --> 01:01:00.280
So the gist is you have an
underlying say a data set or a it

770
01:01:00.280 --> 01:01:04.320
could be a scalar value, could
be an array, could be you know,

771
01:01:04.719 --> 01:01:09.360
you name it right, and then
you have a top level variable that

772
01:01:09.360 --> 01:01:14.719
that returns some value from it,
whether it's the entire array, whether it's

773
01:01:14.800 --> 01:01:17.760
you know, you're adding two numbers
together two plus x. You know it's

774
01:01:17.800 --> 01:01:23.320
going to be. And so the
way that you describe it in there is

775
01:01:23.360 --> 01:01:28.599
that you're behind the scenes. You're
handling any changes. You're only going to

776
01:01:28.639 --> 01:01:34.880
re render, rerender the value when
something changes. So if you go to

777
01:01:35.119 --> 01:01:37.639
you know, your page loads and
it has it changed, then you're in

778
01:01:37.679 --> 01:01:43.639
other words, you're using a cash
value almost is the way you look at

779
01:01:43.639 --> 01:01:46.239
because if you use this computed values, and that's exactly what this does.

780
01:01:46.280 --> 01:01:50.199
I'm watching, I'm you know,
reading this, and I'm going, huh,

781
01:01:50.239 --> 01:01:52.280
that sounds like a lot like a
view computed value behind the scenes.

782
01:01:53.559 --> 01:01:58.840
But the overall gist I'm getting in
it specifically, specifically if you look at

783
01:01:58.880 --> 01:02:06.920
the stores page where you're talking about, uh, what you do with resact

784
01:02:06.920 --> 01:02:12.159
as compared to reduct reducts react,
right, and you've got to set up

785
01:02:12.159 --> 01:02:15.519
the story, create actions, and
your reducers you know, provide reduct story

786
01:02:15.559 --> 01:02:21.599
react and all this kind of stuff. So the gist I'm getting and tell

787
01:02:21.639 --> 01:02:27.119
me if this is is a an
accurate overall statement, you know, as

788
01:02:27.159 --> 01:02:31.159
we sort of wrap up here,
is that you're basically using the platform and

789
01:02:31.199 --> 01:02:38.159
doing a lot of the stuff that
other frameworks have to implement other tools to

790
01:02:38.199 --> 01:02:42.440
do the same thing. Is that
a fair statement. There's a lot of

791
01:02:42.480 --> 01:02:45.920
that, yes, and including you
know this idea that you're looking at with

792
01:02:45.960 --> 01:02:50.280
the stores I it's baked in,
it's and it's actually the same thing as

793
01:02:50.280 --> 01:02:53.639
the using a signal or is you
know, inside a component, it's actually

794
01:02:53.719 --> 01:02:59.400
the exact same code. So there's
no new mechanism that I've created in the

795
01:02:59.440 --> 01:03:02.880
actual core of the framework to enable
stores. It's the same code that you

796
01:03:04.039 --> 01:03:10.760
used to create signals everywhere. Okay, yeah, it's I'm noticing that most

797
01:03:10.760 --> 01:03:17.360
of your your uh, your examples
are in comparison to React. So obviously

798
01:03:17.400 --> 01:03:20.519
we talked about the ahead of time
about the naming. You know, it's

799
01:03:20.599 --> 01:03:24.559
resact. I mean from a historical
standpoint in your development history, did you

800
01:03:24.639 --> 01:03:28.480
start out doing React and you were
saying, I don't like all this the

801
01:03:28.519 --> 01:03:31.320
way you're acts doing stuff, so
I'm going to complete create a more simple

802
01:03:31.360 --> 01:03:35.000
and more efficient way to do it. Is that was that the driving force

803
01:03:35.039 --> 01:03:37.400
behind this? Uh, it's a
bit of that. It's a bit of

804
01:03:37.440 --> 01:03:40.880
that. And i'd say because I've
played with a lot of the frameworks.

805
01:03:40.920 --> 01:03:45.599
I've played with Spelt and Solid and
unfortunately I can't say that i've played with

806
01:03:45.719 --> 01:03:51.360
View as much. A long time
ago, when View was first starting,

807
01:03:51.400 --> 01:03:53.159
I think I played with it,
but it's been a long time since I've

808
01:03:53.159 --> 01:03:57.920
done that. And so I saw
what other frameworks were doing, and I've

809
01:03:57.960 --> 01:04:00.559
you know, done React a lot
in my daily job, And there was

810
01:04:00.639 --> 01:04:04.440
just things that as I've written React, where I was like, man,

811
01:04:05.199 --> 01:04:09.119
it made me think of Spelt and
how Spelt handled something. I'm like,

812
01:04:09.199 --> 01:04:11.480
yeah, I see a lot of
Spelt in here. Yeah. And that

813
01:04:11.599 --> 01:04:16.119
was exactly a lot of the inspirations
Like I want js X, I want

814
01:04:16.159 --> 01:04:23.199
function components, but I also want
Spelt And so that's really where this,

815
01:04:23.800 --> 01:04:28.199
uh you know, I guess inspiration
came from. So why not just use

816
01:04:28.239 --> 01:04:32.000
Felt? Why do this on install? In particular, Spelt you know,

817
01:04:32.119 --> 01:04:39.559
doesn't really use js X, it's
using its own uh you know language.

818
01:04:39.679 --> 01:04:46.239
Really, it's like a whole preprocessor
on that, uh in Spelt or in

819
01:04:46.679 --> 01:04:51.920
React. And so my my understanding
is that JSX is just it's just syntax

820
01:04:51.960 --> 01:04:56.480
sugar. Like if you ran a
preprocessor on a JSX file, you'd end

821
01:04:56.559 --> 01:05:00.480
up with a file that just has
like template string and a couple of functions,

822
01:05:00.519 --> 01:05:02.719
attitude ors. I could be completely
wrong about that. I mean,

823
01:05:02.840 --> 01:05:09.199
it's maybe absolutely wrong, but I
my understanding was like, basically it it's

824
01:05:09.360 --> 01:05:15.119
just doing string escaping for you.
So in this particular case, the transplation,

825
01:05:15.400 --> 01:05:19.800
so I'm using VT and it's using
whatever it uses I'm not one hundred

826
01:05:19.800 --> 01:05:25.079
percent first and the whole underlying structure, but I've used created a plug in

827
01:05:25.159 --> 01:05:30.320
basically that will transform very specifically things
surrounding these keywords that I have as far

828
01:05:30.360 --> 01:05:33.039
as like oh it's a dollar sign, it's variable. You know. It's

829
01:05:33.039 --> 01:05:38.880
actually looking at the oh ASC syntax
to try to pick up on a lot

830
01:05:38.880 --> 01:05:41.559
of that stuff, and it will
pick up on it and then make the

831
01:05:41.559 --> 01:05:45.039
transformations. And it's literally just rewriting
the code. So it's like, oh,

832
01:05:45.119 --> 01:05:48.760
you're assigning a value to this variable
that was assigned earlier or created earlier.

833
01:05:49.039 --> 01:05:51.800
Okay, well I'm going to do
a setter here. Oh you're going

834
01:05:51.840 --> 01:05:55.320
to read this value here. Oh, I'm going to do a getter here.

835
01:05:55.400 --> 01:05:59.960
That's what the transporlation is, and
that actually happens after the JSX gets

836
01:06:00.039 --> 01:06:08.000
compiled into a well code that can
be read by the browser. So it's

837
01:06:08.039 --> 01:06:13.559
like from a step standpoint, res
act doesn't do anything until after the JSX

838
01:06:13.599 --> 01:06:18.159
has been transpiled, and then the
plug and picks up after that and it

839
01:06:18.239 --> 01:06:25.239
parses that code to look for uh, you know these these you know,

840
01:06:25.400 --> 01:06:29.000
dollar you know, variables, And
I think I've got a couple of keywords

841
01:06:29.039 --> 01:06:32.519
in here too that it looks for. But but you you don't feel like

842
01:06:32.599 --> 01:06:35.360
that could be done in SVELT.
You couldn't. You couldn't just run a

843
01:06:35.360 --> 01:06:42.519
preprocessor step on SVELT and then have
it run its processor. Maybe after that,

844
01:06:42.639 --> 01:06:45.360
I, you know, I probably
could, but then I'd have missed

845
01:06:45.360 --> 01:06:49.079
out on all the fun of starting
from scratch. I think that there's value

846
01:06:49.119 --> 01:06:54.440
in that. I think that we
don't need everyone to publish their own framework,

847
01:06:54.519 --> 01:07:00.079
but it we might. We might
do well to have people kind of

848
01:07:00.440 --> 01:07:02.320
you do a Hello World framework or
something like that, you know, take

849
01:07:02.320 --> 01:07:11.159
that, take that path and gain
some of the It's maybe it's not so

850
01:07:11.360 --> 01:07:14.519
much you speak to this. I
haven't created my own framework yet, but

851
01:07:14.599 --> 01:07:20.480
maybe it's not so much magic as
it seems like. Maybe it's more approachable

852
01:07:21.039 --> 01:07:26.760
than we're led to believe. Ah. I think that just depends on your

853
01:07:26.840 --> 01:07:30.320
level of experience, because if you're
a beginner, I would not recommend you

854
01:07:30.360 --> 01:07:33.719
set out to build a you know, JSX framework. But if you've been

855
01:07:34.119 --> 01:07:36.960
using React for a while and you
understand React well enough, then no,

856
01:07:38.159 --> 01:07:42.880
I don't think you could have any
problem. In fact, I'm sure that

857
01:07:43.239 --> 01:07:45.280
I started with an article that I
found online. It was like build your

858
01:07:45.320 --> 01:07:50.199
own React framework. I'll try to
find that link and then post it somewhere.

859
01:07:50.239 --> 01:07:53.519
But it was a long time.
It's been over a year now since

860
01:07:53.559 --> 01:07:57.400
I read that article, and I
don't know if I actually used the article

861
01:07:57.440 --> 01:07:59.800
to do it or if it just
inspired me, like, oh, this

862
01:07:59.880 --> 01:08:02.840
is approachable, And I just kind
of saw some of the pieces and I'm

863
01:08:02.840 --> 01:08:06.320
like, well, how hard can
it be. I don't have to write

864
01:08:06.360 --> 01:08:12.039
a JSX parser or transpiler, because
that's already done. All I have to

865
01:08:12.079 --> 01:08:17.279
do is write a framework that can
handle the code generated by the JSX output

866
01:08:17.920 --> 01:08:24.880
of the you know, the transpiled
output of the JSX And it's like create

867
01:08:24.920 --> 01:08:29.319
element is like the first function you
write. You know that, because that's

868
01:08:29.359 --> 01:08:32.399
what JSX gets transpiled into is a
bunch of create element calls and things of

869
01:08:32.439 --> 01:08:41.520
that nature. So I'd say more
approachable than probably a lot of people think,

870
01:08:42.479 --> 01:08:45.159
but not approachable for like someone just
starting to learn. Sure, yeah,

871
01:08:45.399 --> 01:08:49.439
I mean I think that's that's fair. All right, Well, thanks

872
01:08:49.479 --> 01:08:55.479
for coming on the show. This
has been enjoyable and enlightening, and I'm

873
01:08:55.560 --> 01:09:00.119
glad that you were able to share
your experience A last thing you think,

874
01:09:01.319 --> 01:09:03.520
Man, I want to get to
this next time, but give people a

875
01:09:03.560 --> 01:09:09.560
teaser for this time. No.
Actually, I feel like I covered a

876
01:09:09.560 --> 01:09:14.359
lot, even more than I had
planned and prepared to covers, So I

877
01:09:14.399 --> 01:09:17.279
feel pretty good. All right,
Great, well, then we will go

878
01:09:17.319 --> 01:09:25.319
ahead and head into picks, which
is just where we give a short or

879
01:09:25.399 --> 01:09:33.319
fifteen minute long snippet about something that
we're into recently. And we'll go ahead

880
01:09:33.600 --> 01:09:40.159
and let Steve start us off with
that. Steve, you have some picks

881
01:09:40.199 --> 01:09:44.800
for us or the usual high point
of every episode. My dad Jokes of

882
01:09:44.840 --> 01:09:49.159
the Week. Didn't really have anything
else on the mind to share with today,

883
01:09:49.279 --> 01:09:54.960
so Zach, I don't know if
you listen to the podcast, but

884
01:09:55.359 --> 01:09:59.520
I had people begging me to tell
more dad jokes just kidding. Really I

885
01:09:59.520 --> 01:10:04.800
don't anyway, So question, what
kind of car does a sheep drive?

886
01:10:06.239 --> 01:10:12.720
A Lamborghini? Just kidding. Sheep
can't afford a Lamba, They just take

887
01:10:12.720 --> 01:10:19.239
a uber. It's a long time
ago, you know. I used to

888
01:10:19.319 --> 01:10:25.520
have a dog. I had a
legless dog. His name was Cigarette because

889
01:10:25.520 --> 01:10:33.119
every morning I took him out for
a drag. And then finally, where's

890
01:10:33.119 --> 01:10:38.600
my mask going? I'd like to
say, welcome to the Plastic Surgery Addicts

891
01:10:38.640 --> 01:10:45.000
group. I see a lot of
new faces here today. Nice. That

892
01:10:45.079 --> 01:10:48.359
one was good. That one was
good. Yeah, and the dog one

893
01:10:48.439 --> 01:10:51.000
too. You have a lot of
good ones today. Yeah. I know.

894
01:10:51.359 --> 01:10:57.239
Either I'm getting more used to it
and my my expectation of quality of

895
01:10:57.359 --> 01:11:01.159
humor is declining, or you're getting
better. But I'm not sure. I

896
01:11:01.199 --> 01:11:05.840
think it's just probably getting numb.
Aj that is what it is. I

897
01:11:05.920 --> 01:11:09.359
liked it. I enjoyed it.
I actually got some genuine laughs out of

898
01:11:09.359 --> 01:11:13.239
those. But I'm also a dad. I don't have as many dad jokes.

899
01:11:13.239 --> 01:11:16.520
I don't have any dad jokes to
say today. But that was fun,

900
01:11:17.319 --> 01:11:21.199
all right, That's all I got. All Right, I will pick

901
01:11:21.600 --> 01:11:25.520
I did I mention the last time
that I've been listening to the andrama to

902
01:11:25.560 --> 01:11:30.800
strain? Yes, I believe so
I remember that discussion from previous. It's

903
01:11:30.600 --> 01:11:36.600
I really did enjoy the book.
It's it's written in nineteen sixty nine.

904
01:11:38.439 --> 01:11:44.680
It's aged fairly well. Other than
that, computers, of course still today

905
01:11:44.760 --> 01:11:47.520
can't do any of what they do
in the book, but it's written with

906
01:11:47.760 --> 01:11:56.199
that just that little bit of extra
belief about computers being able to do more

907
01:11:56.239 --> 01:12:00.399
than they can. It's like it's
it works, it works, it's it's

908
01:12:00.560 --> 01:12:04.680
I would say that it's that its
use of of computers as part of the

909
01:12:04.720 --> 01:12:08.279
plot, which is they're not like
a major part of the plot. It's

910
01:12:08.319 --> 01:12:12.039
just you know, secret government research
facility, and the computers can do all

911
01:12:12.039 --> 01:12:15.319
this stuff. I think that it's
it's fairly timeless and has aged well,

912
01:12:15.640 --> 01:12:18.000
and in another two hundred years computers
still won't be able to do those things,

913
01:12:18.000 --> 01:12:25.119
but people will still believe that we're
right on the cusp. The one

914
01:12:25.319 --> 01:12:30.319
thing, the one thing about the
book is that it just ended. And

915
01:12:30.359 --> 01:12:33.760
then I was like, wait,
what did it? Did it skip a

916
01:12:33.840 --> 01:12:39.199
chapter? Like and this is a
lot of people's experiences. The ending of

917
01:12:39.239 --> 01:12:45.560
the book is a sentence, which
it needs a little bit more than that.

918
01:12:45.600 --> 01:12:48.079
It's like a sentence for the ending
of the book. And then the

919
01:12:48.079 --> 01:12:55.680
epilogue and that, Yeah, I
just like so much Pranos or that type

920
01:12:55.680 --> 01:12:58.439
of thing. I don't know,
I didn't I didn't watch The Sopranos,

921
01:12:58.520 --> 01:13:03.000
but the famous black screen where just
everything just stopped. I don't know about

922
01:13:03.039 --> 01:13:10.600
it, but just the ending was
completely unsatisfying because the book has all this

923
01:13:10.720 --> 01:13:13.880
build up, it has all this. The plot thickens, it has all

924
01:13:13.880 --> 01:13:17.600
this, and if only they had
known a few hours before this hypothesis was

925
01:13:17.640 --> 01:13:21.399
completely incorrect. And then when they
get to the end of the book,

926
01:13:23.319 --> 01:13:29.039
it's like, and this quintal coincidental
thing happened, and all is well,

927
01:13:29.479 --> 01:13:34.000
and it's like, oh, but
that said, you know, Michael Crichton's

928
01:13:34.000 --> 01:13:38.800
cranked out a lot of books,
a lot of them pretty darn good,

929
01:13:39.079 --> 01:13:42.600
and and drama to strain. I
think I'd say it's worth the listen or

930
01:13:42.600 --> 01:13:47.239
the read. And I don't know, hopefully, I think I spoiled the

931
01:13:47.359 --> 01:13:50.920
ending already by saying that it ends
in a sentence, because I was like

932
01:13:51.159 --> 01:13:54.199
three quarters the way through the book
and I'm like, man, this is

933
01:13:54.239 --> 01:13:56.920
a lot to wrap up. How
are they going to tie this all together?

934
01:13:58.439 --> 01:14:05.359
They don't. It's just like just
like well, I mean, I

935
01:14:05.399 --> 01:14:08.760
mean, but that's that's real life
too. I mean, you know,

936
01:14:08.840 --> 01:14:13.800
real life often has unsatisfying endings to
projects. You spend three weeks, I

937
01:14:13.800 --> 01:14:15.479
mean, like as a web developer
or whatever. You know this, right,

938
01:14:15.520 --> 01:14:20.279
you spend three weeks investigating a technology
thinking that you're gonna switch databases and

939
01:14:20.359 --> 01:14:24.680
use the latest framework and then it
turns out that all you needed to do

940
01:14:24.760 --> 01:14:31.880
was type Equal's email on the input
field. So very true. Yeah,

941
01:14:31.600 --> 01:14:34.600
I'll have check it out. I
haven't read any Michael Crichton in a long

942
01:14:34.680 --> 01:14:40.199
term, actually, so so I
think I'm due. I don't know if

943
01:14:40.239 --> 01:14:42.079
he's come out with anything a long
time. I don't know if he's still

944
01:14:42.119 --> 01:14:45.640
like I don't know what his age
was or anything. But I loved Jurassic

945
01:14:45.640 --> 01:14:47.720
Park. Although I think that they
did the movie better than the book,

946
01:14:47.840 --> 01:14:51.680
not that the book was not done
well. John Hammont is a much more

947
01:14:51.720 --> 01:15:00.439
relatable character in the movie, and
there's just a few things that they're just

948
01:15:00.479 --> 01:15:02.640
done better in the movie, just
like with The Hunger Games, there's a

949
01:15:02.680 --> 01:15:06.600
few things. I wouldn't say that
the movie is better than the book in

950
01:15:06.640 --> 01:15:12.600
the Hunger Games, like I would
say the movie was refined for Jurassic Park

951
01:15:12.600 --> 01:15:15.640
and the Hunger Games, the movies
telling another side of the story that you

952
01:15:15.760 --> 01:15:20.800
don't get from the perspective of the
narration. But yeah, I like a

953
01:15:20.800 --> 01:15:25.840
lot of his stuff. I think
it's I think it's done well. I

954
01:15:26.159 --> 01:15:29.359
might pick up some more at some
point, although I've got a backlog of

955
01:15:29.399 --> 01:15:32.800
like twenty books to read slash listen
to. So I canceled my Audible subscription

956
01:15:33.560 --> 01:15:38.039
and definitely until I can actually work
through that stuff. But anyway, why

957
01:15:38.079 --> 01:15:41.359
don't you give us a couple of
your picksack? Well, I just have

958
01:15:41.439 --> 01:15:45.920
one for today. Recently because I
don't even really have time anymore, I

959
01:15:45.920 --> 01:15:49.119
feel like to engage in, you
know, leisure activities as far as reading

960
01:15:49.119 --> 01:15:55.359
books and even watching some TV.
But I did find some time just to

961
01:15:55.399 --> 01:15:59.840
take a break and watch the show
that caught my eye called It's on Netflix,

962
01:16:00.039 --> 01:16:03.359
A Man in Full. It's got
Jeff Daniels in it. Does that

963
01:16:03.439 --> 01:16:08.239
ring a ball anybody? I think
it's relatively new, like maybe just came

964
01:16:08.279 --> 01:16:11.800
out like even this year. I
mean, I know Jeff daniels is,

965
01:16:11.840 --> 01:16:15.159
but I haven't. I think I've
heard about it or see I mentioned I'm

966
01:16:15.199 --> 01:16:19.520
not familiar with it. So it's
basically, he's a real estate mogul and

967
01:16:19.760 --> 01:16:23.880
I think Georgia, and you know, he's like this big, big to

968
01:16:23.920 --> 01:16:26.039
do. He's got you know,
lots of real estate and it's a big

969
01:16:26.079 --> 01:16:30.199
building. But you know, he
may be a little bit shady, but

970
01:16:30.279 --> 01:16:32.800
he also employs some really nice people
and so it's got you know, some

971
01:16:32.920 --> 01:16:40.800
side stories where, you know,
like his lawyer struggles because he's actually a

972
01:16:40.840 --> 01:16:45.760
nice guy and really would like to
be doing something a little more holistic as

973
01:16:45.760 --> 01:16:51.039
opposed to just defending this real estate
mogul who maybe has some shady business practices.

974
01:16:51.079 --> 01:16:57.520
But and so there's like a whole
side story in the episode where he

975
01:16:58.439 --> 01:17:01.840
fights for this guy's read him that. I don't want to give too much

976
01:17:01.880 --> 01:17:06.359
away because it's actually a pretty good
side story and the main story is like

977
01:17:06.560 --> 01:17:11.720
okay, but I think I really
liked the side story better, Like I

978
01:17:11.760 --> 01:17:15.560
think I committed to watching the rest
of it and was you know, kept

979
01:17:15.560 --> 01:17:16.880
coming back to see the rest of
it. It's a mini series, so

980
01:17:16.880 --> 01:17:21.279
it's not very long. Was this
side story of this lawyer and how he

981
01:17:21.279 --> 01:17:29.439
helped this gentleman basically through like some
legal troubles. So I don't want to

982
01:17:29.439 --> 01:17:32.760
give away too much, but really
good recommend it. I think it's a

983
01:17:32.880 --> 01:17:39.680
I think it's a fun watch,
like an ongoing series mini. Well,

984
01:17:39.720 --> 01:17:45.159
it's based on it's based on the
book by Tom I'm looking now, I

985
01:17:45.159 --> 01:17:51.079
can't remember what the author's name was, And it's based on a book Tom

986
01:17:51.119 --> 01:17:56.399
Wolf. So it's based on the
book by Tom Wolf named A Man in

987
01:17:56.479 --> 01:18:00.279
Full So I don't think it's going
to be a continuing thing. It's a

988
01:18:00.319 --> 01:18:03.960
mini series. I think that's it, which is something that I find that

989
01:18:04.000 --> 01:18:10.399
I'm leaning toward lately because I just
don't have the commitment space to engage in

990
01:18:10.520 --> 01:18:15.279
series that are going ongoing anymore.
Like I feel like I'm like already beyond

991
01:18:15.439 --> 01:18:17.479
season whatever one, two or three
of things that I want to watch,

992
01:18:17.520 --> 01:18:20.960
and I'm like, uh, I
don't have time to catch up. I

993
01:18:21.760 --> 01:18:26.640
really wish they would just focus on
a story that has a beginning and an

994
01:18:26.760 --> 01:18:31.199
end and not artificially drag out seasons
of things forever and ever, because eventually

995
01:18:31.239 --> 01:18:38.319
they just they become the same thing. Like there's no there's no character development

996
01:18:38.319 --> 01:18:41.479
because once the main guy gets with
the main girl, at that point,

997
01:18:41.520 --> 01:18:44.319
all that tension is gone. And
then they keep it going for another three

998
01:18:44.319 --> 01:18:47.239
seasons by having them separate and then
get back together again, and you know,

999
01:18:47.319 --> 01:18:51.920
it's there's Yeah, that's sort of
the the mech if you're familiar with

1000
01:18:53.039 --> 01:18:58.159
Mexican telenovelas, that's their approach,
right, It's a it's a there's a

1001
01:18:58.199 --> 01:19:00.039
beginning and an end, you know, it's not like As the Stomach Turns

1002
01:19:00.039 --> 01:19:04.279
that's been going for thirty years or
you know, something like that, where

1003
01:19:04.319 --> 01:19:06.760
they tell the same story over and
over. It's just a different twist.

1004
01:19:06.800 --> 01:19:10.880
It's like, okay, here,
it starts here, it ends, it's

1005
01:19:10.920 --> 01:19:15.159
done, you know, and then
they to be honest, then they do

1006
01:19:15.239 --> 01:19:17.520
a whole new Televila that's sort of
like the previous one with different plot twists.

1007
01:19:17.560 --> 01:19:21.600
You know. So it depends on
your variation. Yeah, well,

1008
01:19:21.640 --> 01:19:29.039
there's so many Somebody shows that could
be great if they would just end them

1009
01:19:29.479 --> 01:19:33.279
six or twenty seasons earlier, right, like give me one, two,

1010
01:19:33.399 --> 01:19:40.640
three seasons, maybe four is like
a reprise or a bonus or a you

1011
01:19:40.680 --> 01:19:45.920
know, a year in the life. But don't don't give me eight seasons,

1012
01:19:45.960 --> 01:19:48.479
Like just give me a good story. Yeah. One of my favors

1013
01:19:48.640 --> 01:19:58.399
was on Amazon was the John Krasinski
Jack Cryan Seria. I loved those series.

1014
01:19:58.399 --> 01:20:01.000
Those are good. The third one
is a little week, but the

1015
01:20:01.079 --> 01:20:03.439
first two were really good, and
they were just like, you know,

1016
01:20:03.600 --> 01:20:08.079
I think it was eight episodes,
start, done, end of the storyline,

1017
01:20:08.119 --> 01:20:10.119
you know, and then it come
back and I think this last one

1018
01:20:10.239 --> 01:20:14.079
was third one is supposedly the last
one that was great. I was hooked

1019
01:20:14.079 --> 01:20:15.840
on those things. Man, I'm
sitting at night watching them on my phone,

1020
01:20:15.840 --> 01:20:19.039
you know, when I'm supposed to
be in bed, and but yeah,

1021
01:20:19.079 --> 01:20:25.000
stuff like that is really good.
So all right, well, oh,

1022
01:20:25.039 --> 01:20:28.359
I should have switched the screen of
Bob earlier in all chatting. Anyway,

1023
01:20:28.840 --> 01:20:33.680
thanks for coming on. It's great
to have you and have a nice

1024
01:20:33.720 --> 01:20:41.520
life. Hopefully there's a good resaction
to this episode. Well, thank you

1025
01:20:41.560 --> 01:20:44.399
guys for having me. I really
appreciate it. Yep, all right,

1026
01:20:44.439 --> 01:20:47.319
and to all the listeners, thanks
for tuning in. Well thanks and uh,

1027
01:20:47.760 --> 01:20:50.199
I guess we'll go ahead and click
the end stream button. All right,

1028
01:20:50.239 --> 01:20:53.000
Adios, Adios