WEBVTT

1
00:00:06.320 --> 00:00:10.480
Hey, Welcome to React Round Up, the podcast where we keep you updated

2
00:00:10.519 --> 00:00:16.199
on all things React related. This
show is sponsored by Raygun and produced by

3
00:00:16.280 --> 00:00:20.239
two companies, Top and'd oves and
Onvoid. Top and Dows is very great

4
00:00:20.280 --> 00:00:23.679
Top and Dove to get top and
pay and recognition. We're working on interesting

5
00:00:23.719 --> 00:00:29.679
problems and making meaningful community contributions,
and Void is the risk free way to

6
00:00:29.839 --> 00:00:37.000
expand your software and design teams.
With Void, you can pay by tests,

7
00:00:37.079 --> 00:00:42.719
so you only really pay after the
engineers and designers at onvoid have delivered

8
00:00:43.039 --> 00:00:48.479
and you have approved the tests that
they have done. In today's episode,

9
00:00:48.600 --> 00:00:53.719
we will talk about the UY libraries
that we use. My name is Lucas

10
00:00:53.759 --> 00:00:57.920
Paganini, one of the hosts in
this podcast, and joining me in today's

11
00:00:57.960 --> 00:01:04.519
episode are also the host Chris Ruin, Hi everyone, and Peter Ossa.

12
00:01:06.439 --> 00:01:15.239
Hi everyone. So this episode is
actually a continuation of a previous episode that

13
00:01:15.280 --> 00:01:19.159
we have on the libraries that we
generally use on our projects. But on

14
00:01:19.200 --> 00:01:25.920
that episode that I highly recommend you
check out, we didn't had enough time

15
00:01:25.959 --> 00:01:30.480
to go into UY libraries just because
we spend so much time talking about all

16
00:01:30.560 --> 00:01:34.719
the other utility libraries that we use, and also what we use for testing

17
00:01:34.879 --> 00:01:41.319
and stuff like that. So in
today's episode we will try to speak more

18
00:01:41.920 --> 00:01:48.519
on the UI side of things and
what do we generally code ourselves from scratch

19
00:01:48.840 --> 00:01:53.560
and what do we generally just get
something ready made to use on our projects

20
00:01:53.719 --> 00:01:57.840
or sometimes it can be a mix
of both, depending on how much time

21
00:01:57.879 --> 00:02:02.439
we have for a particular project.
So, Chris, would you like to

22
00:02:02.799 --> 00:02:07.759
get things rolling? Sure? Yeah, I'll just mention too that I really

23
00:02:07.840 --> 00:02:12.680
like and I find myself coming back
to many projects. So the first one

24
00:02:13.159 --> 00:02:17.759
is react toastify, So that's a
toast is any of those you know,

25
00:02:17.759 --> 00:02:23.919
those pop ups that come in and
it's it's very configurable, so you can

26
00:02:23.000 --> 00:02:25.520
have them come from the bottom,
you can have them come from the top,

27
00:02:25.520 --> 00:02:30.000
from the side. It works nicely
on mobile too, And then you

28
00:02:30.039 --> 00:02:36.599
can I really like how it's designed
because you can extend a lot of the

29
00:02:36.639 --> 00:02:40.960
functionality, I mean, the function
the options itself are very extensive. You

30
00:02:40.960 --> 00:02:45.520
can you can set the time,
you can set if it's like permanent,

31
00:02:45.560 --> 00:02:50.759
like you need a user interaction to
close. But even then the author provides

32
00:02:50.800 --> 00:02:53.000
a way like here's how you add
custom styles and things like that. So

33
00:02:53.039 --> 00:02:59.919
it's I really like it as a
library, and it could be something potential.

34
00:03:00.159 --> 00:03:01.680
I mean, if you wanted a
really nice style, it could be

35
00:03:01.719 --> 00:03:07.360
something you right yourself. But but
I think for for something like that where

36
00:03:07.439 --> 00:03:13.159
you you know, you would need
probably very special CSS for all those like

37
00:03:13.240 --> 00:03:15.599
those slide ins and stuff. For
me, it's just nice to use a

38
00:03:15.599 --> 00:03:22.400
library like that. The second one, it's I gonna mention it. I'm

39
00:03:22.400 --> 00:03:25.560
looking at at my project. I
s the for for drag and Drop,

40
00:03:27.759 --> 00:03:31.680
React Beautiful dn D, so it's
React Dash Beautiful dash d n D and

41
00:03:31.719 --> 00:03:37.039
I believe it's the same. It's
the it's written by a Lassian, so

42
00:03:37.080 --> 00:03:39.800
it's the very same drag and drop. If if any listeners or you guys

43
00:03:39.840 --> 00:03:46.639
know about Jira, that's basically the
library behind uh the drag and drop functionality.

44
00:03:46.120 --> 00:03:52.199
And again, like I it's amazing
to me how simple they made.

45
00:03:53.719 --> 00:03:58.199
What you could imagine is super complex
like dragging things and then if you let

46
00:03:58.199 --> 00:04:00.120
go, it snaps back. Really
all comes down to is you need to

47
00:04:00.120 --> 00:04:04.439
define. You know, you can
imagine like it's called like a source div

48
00:04:04.719 --> 00:04:10.479
like where all your source items live
and then your target dive where you want

49
00:04:10.479 --> 00:04:14.919
to drag to. And basically I
mean, there are some caveats to to

50
00:04:15.039 --> 00:04:18.439
how you have to write it,
but overall it's it's super easy to make

51
00:04:18.480 --> 00:04:24.839
really eat nice dragon drop stuff.
So cool cool, all right, how

52
00:04:24.879 --> 00:04:29.879
about you better? Okay? Yeah
for me, I for you O libraries

53
00:04:29.959 --> 00:04:32.720
like you said, we are specifies, I go to for toost and a

54
00:04:32.800 --> 00:04:40.079
lots. Yeah. Then next I
also work with probably then depending on the

55
00:04:40.079 --> 00:04:44.800
project, I use maybe start components, so you start components for like my

56
00:04:44.959 --> 00:04:48.879
design lib. Mostly if I want
to build like a design system from squad

57
00:04:48.920 --> 00:04:54.439
Shift, I want to start components. And then there's still the occasional one

58
00:04:54.480 --> 00:05:00.120
of shots in which uses I think
adds UI and yeah, just so many

59
00:05:01.480 --> 00:05:08.800
variants on so many, so much. I think I still also use them.

60
00:05:09.519 --> 00:05:14.120
Did drug bars the d n D
right, yeah, or kind of

61
00:05:14.240 --> 00:05:20.759
the drug vip y, so yeah, I kind of mostly I use them

62
00:05:20.839 --> 00:05:27.480
the toast they use their star components
for design system. Then if I want

63
00:05:27.480 --> 00:05:30.519
to kind of use like a Coustom
design system that's been BI I used.

64
00:05:30.560 --> 00:05:35.839
I used things like ant design for
like my UI, and then I still

65
00:05:35.920 --> 00:05:40.160
use I think I've used most of
the popular ones. I use Chaka.

66
00:05:40.199 --> 00:05:45.360
I like I've used Chakra I've used
a mount time. I've also used them

67
00:05:45.920 --> 00:05:49.040
anti design, but Anti is like
the default because yeah, so I kind

68
00:05:49.040 --> 00:05:54.680
of got accustomed to it because of
where I work, So it's kind of

69
00:05:54.759 --> 00:05:58.120
like the default for me. If
I don't want to kind of build components

70
00:05:58.160 --> 00:06:03.720
from stag constant components, I just
do and then check out. It's just

71
00:06:03.759 --> 00:06:08.920
for like my paint projects, like
have some little projects that welcome soil.

72
00:06:09.000 --> 00:06:13.920
You start to think, I think
that's for me. Let me get into

73
00:06:14.360 --> 00:06:18.279
data a little bit, because you
mentioned that you use end design when you

74
00:06:18.319 --> 00:06:23.519
don't want to start from scratch,
right, But you also mentioned another library

75
00:06:23.560 --> 00:06:28.519
which is based on radix u Y, And I'm not super familiar with end

76
00:06:28.600 --> 00:06:35.439
design, but I know that radix
u y is heavily how can I put

77
00:06:35.480 --> 00:06:43.519
it visual free like it allows you
to at least from the understanding that I

78
00:06:43.560 --> 00:06:46.759
had about radix y, and I
might be wrong, I believe it's very

79
00:06:46.759 --> 00:06:51.439
easy for you to change how a
particular component looks like and still keep the

80
00:06:51.600 --> 00:06:57.600
functionalities of it. So basically the
there are and I think this is an

81
00:06:57.639 --> 00:07:01.079
important distinction first to clarify to the
audience, because there are UY libraries that

82
00:07:01.120 --> 00:07:12.040
are more focused on on, like
really giving you the entire the entire component,

83
00:07:12.279 --> 00:07:15.920
like the functionality and the visuals.
And there are other libraries, other

84
00:07:16.040 --> 00:07:23.319
UI libraries that they're more focused on
solving the functionality pieces for you and allowing

85
00:07:23.360 --> 00:07:30.360
you to apply the visuals that you
want. And when I mean functionalities,

86
00:07:30.720 --> 00:07:35.959
it also includes accessibility, so all
the things that you would have to know

87
00:07:36.360 --> 00:07:43.399
in order to make your components accessible
for people in different devices or even through

88
00:07:43.480 --> 00:07:47.240
voice control, that would be handled
by you and you would just go and

89
00:07:47.319 --> 00:07:50.879
apply the visuals. And there are
other libraries that already do the visuals for

90
00:07:50.959 --> 00:07:56.120
you, and generally they allow you
to customize such visuals in a way,

91
00:07:56.160 --> 00:08:01.399
but they are either more flexible or
more rigid on it, like some libraries

92
00:08:01.439 --> 00:08:05.439
only allow you to change the colors
and stuff like that, and others really

93
00:08:05.480 --> 00:08:13.839
allow you to fully customize the entire
experience the entire visuals of the of the

94
00:08:13.839 --> 00:08:22.480
component was still keeping the functionalities that
the library provides. So I'd like to

95
00:08:22.519 --> 00:08:26.439
circle back with you too and kind
of get your feeling on how much do

96
00:08:26.480 --> 00:08:33.519
you lean towards choosing libraries that are
like just give you the entire component,

97
00:08:33.000 --> 00:08:37.759
or if you generally choose libraries that
are just the functionality and then you come

98
00:08:37.799 --> 00:08:43.559
in with the with the visuals later. So yeah, just starting with you

99
00:08:43.639 --> 00:08:48.759
period, just because you just finished
answer answering, So how is at design

100
00:08:48.879 --> 00:08:56.320
on that and just going like even
beyond it design your personal opinion on this

101
00:08:56.440 --> 00:09:03.039
paradigm? Okay, Yeah, so
for like for design, but I love

102
00:09:03.039 --> 00:09:07.399
how on design kind of it's kind
of very functional, right, so mostly

103
00:09:09.200 --> 00:09:11.759
like if I want to use on
design, it's a highly functional filmwork.

104
00:09:11.840 --> 00:09:18.480
It has so many most of the
your components like the butt like logical aspects,

105
00:09:18.559 --> 00:09:22.000
or if you want the custom calendar, if you want setain things,

106
00:09:22.000 --> 00:09:26.440
if you want certain custom drop downs, like it's pribute to right, So

107
00:09:26.919 --> 00:09:31.000
yeah, they I will actually use
designs for projects that I really don't want

108
00:09:31.039 --> 00:09:35.799
to focus more on the functionality,
like for different things like for example,

109
00:09:37.320 --> 00:09:41.399
I don't want to start maybe building
like a custom calendar from scratch or something

110
00:09:41.600 --> 00:09:46.039
I would probably just use on design
or it has I think there's some components

111
00:09:46.080 --> 00:09:52.960
like tabs and setting on tabs on
the tables, right, custom tables,

112
00:09:52.320 --> 00:09:58.120
right, so if I don't need
to kind of maybe build them for scuts,

113
00:09:58.120 --> 00:10:01.639
I think the basic feature of those
people with some NT design or tabs,

114
00:10:01.639 --> 00:10:05.039
and there are kind of enough.
So at that moment you just be

115
00:10:05.240 --> 00:10:11.200
considering about only just maybe taking the
CSS for your own design special you wanted

116
00:10:11.279 --> 00:10:16.360
to look the way maybe the Figma
designers kind of created for you. Right.

117
00:10:16.159 --> 00:10:20.480
But then if I for godics,
you are like for shot see,

118
00:10:20.519 --> 00:10:24.559
and it's when I really want to
go dip into like building the functionality.

119
00:10:24.600 --> 00:10:28.200
Maybe they're like, I just want
to build it from like from scratch,

120
00:10:28.320 --> 00:10:33.200
and there are maybe there are setting
caveats right in the function in the demands

121
00:10:33.240 --> 00:10:39.840
like the specifications. Maybe they want
a calendar that does this in a setting

122
00:10:39.879 --> 00:10:43.480
format and then our public think about
how to implement this in and design is

123
00:10:43.600 --> 00:10:48.639
kind of crul But then it to
require me to kind of do so much

124
00:10:48.720 --> 00:10:52.840
and somewhat adjustment rather than just doing
that, maybe I should just maybe just

125
00:10:54.080 --> 00:10:58.000
to use it. Right. So
it's just it depends on the scope of

126
00:10:58.039 --> 00:11:03.720
the work, right, So I
probably will use like components like anti design

127
00:11:03.759 --> 00:11:09.159
material you are a checard wife or
things like for projects that I know that

128
00:11:09.440 --> 00:11:13.440
kind of they don't have caveers,
so they don't have complexity to a certain

129
00:11:13.480 --> 00:11:18.679
level. Right. Maybe business do
not demand that they want this to be

130
00:11:18.919 --> 00:11:22.679
in they kind of a different way
than the regular way the components are,

131
00:11:22.799 --> 00:11:28.440
right, So I just know it
is probably just CSS two king and changing

132
00:11:28.480 --> 00:11:31.240
colors or changing patterns or changing this
and that. Right. But then if

133
00:11:31.279 --> 00:11:35.440
it's kind of like a custom component
that's highly functional specific to me, be

134
00:11:35.600 --> 00:11:41.039
like whatever our requirements where it was
given to me, right, and probably

135
00:11:41.080 --> 00:11:45.759
maybe our design doesn't cover that.
I probably would use chats and so,

136
00:11:45.879 --> 00:11:50.679
yeah, I understand what you said
about and functional. Yeah, there are

137
00:11:50.720 --> 00:11:52.799
a lot of film of that kind
of functional are the kind of focus is

138
00:11:52.879 --> 00:11:58.000
on giving me a lot of like
freedom to build it, to build,

139
00:11:58.320 --> 00:12:01.279
like to just build up right if
you see even when you shot see the

140
00:12:01.399 --> 00:12:07.039
end shatsy and say we get to
addiction. I also work with telling as

141
00:12:07.080 --> 00:12:11.440
well, and I think gradi and
we shuts and it generates the R components

142
00:12:11.440 --> 00:12:16.519
for you, so you can nactually
go to the generated pertion your and tricky

143
00:12:16.679 --> 00:12:18.120
to the way you want, like
if you want to add more functionality,

144
00:12:18.120 --> 00:12:24.039
if you want to extend it,
maybe there's a customer functionality that your business

145
00:12:24.639 --> 00:12:28.519
specification is kind of bringing up.
You could just adjust it from there.

146
00:12:28.679 --> 00:12:33.759
So yeah, I think it's just
based on maybe the complexity of the work.

147
00:12:33.960 --> 00:12:37.600
I think that's when I use any
of them. Both start components are

148
00:12:37.600 --> 00:12:43.000
shotsy and yeah, well this is
kind of simple and kind of needs maybe

149
00:12:43.039 --> 00:12:48.879
the basic functionality or probably just I'm
designed then estimate why you are as well

150
00:12:48.960 --> 00:12:56.120
and the chap while a h gotcha, how about you, Chris. Yes,

151
00:12:56.320 --> 00:13:03.720
I have a confession. I haven't
used an actual component library in a

152
00:13:03.799 --> 00:13:07.080
long long time, and I think
that's due to me starting. I mean

153
00:13:07.120 --> 00:13:13.639
I was using GRAC very early and
there were some component libraries and I ran

154
00:13:13.679 --> 00:13:18.120
into kind of what Peter was mentioning. It's like, I think it was

155
00:13:18.120 --> 00:13:20.960
probably my fault, Like I had
a picture like, oh, I'm going

156
00:13:20.000 --> 00:13:24.320
to be able to have like very
cool animations and all this fancy stuff.

157
00:13:24.759 --> 00:13:26.840
But I think the one I was
using is like, no, We're just

158
00:13:26.879 --> 00:13:30.000
going to give you, like,
you know, a button and like drop

159
00:13:30.080 --> 00:13:35.759
down whatever. So I've kind of
I kind of have like a hybrid approach

160
00:13:35.799 --> 00:13:43.799
typically because what I find is is
a lot of the time you can accomplish

161
00:13:43.000 --> 00:13:48.360
you know, eighty to ninety percent
of what you need with just like the

162
00:13:48.519 --> 00:13:52.559
HTML tags, right, I mean
that does require that usually, Yes,

163
00:13:52.679 --> 00:13:56.840
you would still need I mean,
it's no substitute for a styling framework,

164
00:13:56.879 --> 00:14:03.279
so you would still need like Tailwind
or Bootstrap. But then usually so I

165
00:14:03.279 --> 00:14:05.799
guess what I'm saying is I have
I have a hybrid approach, so I

166
00:14:05.799 --> 00:14:09.799
would have always of course like a
CSS library, But then you know,

167
00:14:09.840 --> 00:14:15.279
when I need something complex, and
like Peter was mentioning calendars or something like

168
00:14:15.320 --> 00:14:20.279
that, I typically kind of hunt
around and look at what open source options

169
00:14:20.279 --> 00:14:24.399
are available and kind of kind of
drop it in. But I will say,

170
00:14:24.759 --> 00:14:28.480
uh, Peter, I was looking
at this, this radix UI,

171
00:14:28.879 --> 00:14:33.600
and now I know where all these
cool like these like newer startups and nicer

172
00:14:33.600 --> 00:14:37.759
looking startups get their styles from.
So I will I'm definitely going to look

173
00:14:37.759 --> 00:14:39.679
into this because I was actually thinking
of the next product I build. I

174
00:14:39.720 --> 00:14:43.720
want to I want to look like
the cool kids. So uh so I'll

175
00:14:43.759 --> 00:14:48.440
definitely take a look at this.
It looks really really nice. Yeah,

176
00:14:48.559 --> 00:14:52.879
that was one good to novodicts,
right, so I think that's what makes

177
00:14:52.919 --> 00:14:56.039
them shots CMM. I think this
will use these shots cm. Just what

178
00:14:56.159 --> 00:15:01.960
this is radcts. That's beautiful styling
of this sort and the dashboard that look

179
00:15:01.000 --> 00:15:05.919
yeah, to actually just get that
one, so it's kind of sapistic and

180
00:15:05.039 --> 00:15:09.639
you can change that as well.
That's the beauty of of like just using

181
00:15:09.639 --> 00:15:16.840
shots to really change and customize these
configurations as you wish, and it's what

182
00:15:16.000 --> 00:15:20.799
you feeling too. I don't know, increase, you're probably knowly dealing guible

183
00:15:20.720 --> 00:15:26.360
you could do so maybe took it
off the boostop as well too, depends

184
00:15:26.399 --> 00:15:28.519
on how you're going to configure it. Yeah, it's actually very cool.

185
00:15:30.000 --> 00:15:35.960
Yeah, cool too. Yeah,
I'm actually with Chris on that, Like

186
00:15:37.960 --> 00:15:46.399
I generally don't use libraries. I
generally just code stuff from scratch. Uh,

187
00:15:46.440 --> 00:15:52.480
And it's generally because it's either too
easy to do like bottoms and stuff

188
00:15:52.480 --> 00:15:58.960
like that. And honestly, if
you just organize things nicely from the get

189
00:15:58.960 --> 00:16:03.519
go, then you're not to see
yourself reusing You're not going to see yourself

190
00:16:03.960 --> 00:16:07.840
a copying pasting much like of course, if you just try to style your

191
00:16:07.879 --> 00:16:11.720
component your bottoms using CSS classes,
then you're going to end up having a

192
00:16:11.799 --> 00:16:18.559
nightmare afterward. But if you actually
isolate stuff into proper components and it's just

193
00:16:18.639 --> 00:16:25.720
so easy to reuse them afterwards,
that I just don't see the benefit of

194
00:16:26.000 --> 00:16:33.039
going with the library for it because
I find myself space wasting more time to

195
00:16:33.080 --> 00:16:37.000
figure out how to change that particular
component to fit what I want for my

196
00:16:37.120 --> 00:16:45.039
design. Then I would have spent
coding the component from scratch. But that

197
00:16:45.440 --> 00:16:52.840
heavily depends on how fast we need
to deliver the project and also how complex

198
00:16:52.879 --> 00:16:56.879
are the components that we're talking about. Because Peter mentioned a calendar, and

199
00:16:59.200 --> 00:17:06.160
I have coded a calendar from scratch, but the product itself was a calendar,

200
00:17:06.480 --> 00:17:11.200
so it made sense, you know, So it made total sense to

201
00:17:11.319 --> 00:17:15.599
not go with a with a ready
made component, like we needed the power

202
00:17:15.759 --> 00:17:21.880
to customize it to our needs.
But if you were just like, hey,

203
00:17:22.000 --> 00:17:25.680
we're building this project and we want
to have a calendar here, but

204
00:17:25.759 --> 00:17:30.960
it's like, this is not one
of the most access most accessed parts of

205
00:17:30.000 --> 00:17:34.960
the system, and it's really just
the calendar visualization for the function lettery.

206
00:17:36.039 --> 00:17:38.279
So the calendar itself is not the
focus. It's just, uh, the

207
00:17:38.400 --> 00:17:44.240
data is the focus and the calendar
is just one of the types of visualization.

208
00:17:44.960 --> 00:17:48.519
Then yeah, sure, I'm probably
just gonna look for a ready made

209
00:17:48.559 --> 00:17:53.119
component because coding a calendar from scratch
is not easy, especially if you consider

210
00:17:53.279 --> 00:17:59.279
all the different time zones that you've
got to support and drag and drop and

211
00:17:59.319 --> 00:18:03.279
everything, and you just realized that
that in itself is an entire project.

212
00:18:03.160 --> 00:18:08.200
But if you don't have stuff like
that, it's just like the most complex

213
00:18:08.359 --> 00:18:15.440
component is going to be a drop
down with sub menus. Then I don't

214
00:18:15.480 --> 00:18:19.359
know, like I never felt that
this was really like, Okay, this

215
00:18:19.519 --> 00:18:27.599
is way too complex, let's bring
a library for it. But that being

216
00:18:27.720 --> 00:18:33.160
said, I always really like the
idea of getting libraries that would provide the

217
00:18:33.200 --> 00:18:38.839
accessibility and functionality, and then I
could just work on top of that and

218
00:18:38.880 --> 00:18:44.440
provide the visuals. So I really
like the idea of looking for stuff like

219
00:18:44.519 --> 00:18:49.720
that. It's just that thus far
we haven't really needed that. And it

220
00:18:49.799 --> 00:18:53.000
might just be because we kind of
got to a point where we kind of

221
00:18:53.039 --> 00:18:57.240
have our internal library for that sort
of stuff based on the things that we

222
00:18:57.319 --> 00:19:07.440
built before. But I think it's
highly interesting to look at what those other

223
00:19:08.200 --> 00:19:17.359
libraries are doing. But I don't
know, I'm just haven't yet found something

224
00:19:17.440 --> 00:19:22.400
that was kind of like tailwind in
terms of market adoption. You know,

225
00:19:22.160 --> 00:19:30.680
I wouldn't recommend people to look into
library acts and then you find yourself two

226
00:19:30.720 --> 00:19:34.119
years from now in a situation where
this has been deprecated and like now the

227
00:19:34.559 --> 00:19:41.720
new thing is library Z. So
this can happen to any library, you

228
00:19:41.759 --> 00:19:48.000
know, but I haven't yet noticed
any of those libraries that are more flexible.

229
00:19:48.079 --> 00:19:52.920
Of course, like mature Design is
super stable to use, but it's

230
00:19:52.960 --> 00:19:59.799
not very flexible right to provide their
own uy. So maybe radix is already

231
00:20:00.000 --> 00:20:04.240
stable enough that we can advise people
to use it, But I'm not sure

232
00:20:04.240 --> 00:20:07.559
because I haven't used it enough,
and I'm not sure if there are any

233
00:20:07.599 --> 00:20:12.920
other libraries other than reddicks that provide
the same thing but are more popular and

234
00:20:14.119 --> 00:20:21.640
thus less susceptible to being replaced by
a new kid in the block. Yeah.

235
00:20:21.839 --> 00:20:25.240
I think that's a good point,
because I remember, you know,

236
00:20:25.279 --> 00:20:32.000
when I was starting out. You
think you tend to think you need some

237
00:20:32.039 --> 00:20:38.039
sort of complex library just for something
like things like layout and really the design

238
00:20:38.119 --> 00:20:44.880
itself. And I think it's my
recommendation would be to learn, you know,

239
00:20:45.000 --> 00:20:49.839
some As much as I know people
dislike CSS for all its weird rules,

240
00:20:49.480 --> 00:20:53.200
it is worth it to learn some
basics. I mean, you would

241
00:20:53.200 --> 00:20:56.319
be amazed, at least I was
amazed just how much you can do with

242
00:20:56.400 --> 00:21:00.920
something as simple as flex right,
like a flex box and all that.

243
00:21:00.039 --> 00:21:07.200
I mean. So and once you
know kind of the what all of those

244
00:21:07.200 --> 00:21:11.519
special classes and Tailwind and Brutstrapp are
doing behind the scenes, I think that's

245
00:21:11.519 --> 00:21:14.960
already a huge leg up. And
then and then you can start getting into

246
00:21:15.000 --> 00:21:21.319
these these frameworks that that in turn
are also using those all those concepts in

247
00:21:21.319 --> 00:21:26.440
the background. Right, So yeah, yeah, I agree with you as

248
00:21:26.440 --> 00:21:30.440
you right. So, like I
think when Chris, I think there was

249
00:21:30.480 --> 00:21:33.880
something look said, don Look said
about them maybe using these libraries for example,

250
00:21:33.920 --> 00:21:37.039
for things like calendar. Right,
So the thing is that a lot

251
00:21:37.079 --> 00:21:41.519
of us kind of forget that there
is like default de facto calendar, which

252
00:21:41.559 --> 00:21:48.519
is the history of it by calendar
that I really don't know why. Maybe

253
00:21:49.599 --> 00:21:55.559
we don't maybe we don't like using
that diff behind maybe is due to design

254
00:21:55.559 --> 00:21:59.680
specs. But then I think c
I says on history kind of gives us

255
00:21:59.720 --> 00:22:03.799
a lot of like they've made a
lot of things available for so I like,

256
00:22:03.920 --> 00:22:07.279
I really can't process doing layouts with
your library when you can those do

257
00:22:07.400 --> 00:22:12.160
these at most maybe you're using a
library use something like that gives you like

258
00:22:12.240 --> 00:22:18.039
utilities for those things simple level like
low level utilities right, So, but

259
00:22:18.240 --> 00:22:22.319
not like maybe using things like oh
maybe for example, Materla you're kind of

260
00:22:22.839 --> 00:22:27.559
writing like who colomne like I don't
know, as a component and then using

261
00:22:27.599 --> 00:22:33.359
that to build from like layout,
like I don't know if you use like

262
00:22:33.559 --> 00:22:34.960
vacube, because at the end of
the day, you could just use a

263
00:22:36.000 --> 00:22:41.200
simple flex and that would just agreed
and that would really address that. So

264
00:22:41.640 --> 00:22:44.160
yeah, if I want to encoade
a lot of you to use your like,

265
00:22:44.480 --> 00:22:48.839
I just focus on using your libries
for the complex aspect, like things

266
00:22:48.839 --> 00:22:52.480
for example, like calendars or utilities. You feel that we take time to

267
00:22:52.480 --> 00:22:56.799
build, right that as I'm using
there for like fundamentals, and the fundamentals

268
00:22:56.799 --> 00:23:00.559
you could just use CS and you're
good to do. I don't really see,

269
00:23:00.680 --> 00:23:07.480
you know, maybe going to jut
using ju level layout from epis for

270
00:23:07.519 --> 00:23:11.160
that. Just usually things that are
a beats complex, like we reach the

271
00:23:11.279 --> 00:23:17.079
library for examply you don't like maybe
creating your own tops if you use your

272
00:23:17.079 --> 00:23:21.400
own top components. Yeah, all
these things, right, things that it

273
00:23:21.440 --> 00:23:25.480
beats. Yeah, but most for
leyouts, most for sub setting things right

274
00:23:26.119 --> 00:23:27.359
kind of. Yeah, So I
think that's also my own idea, and

275
00:23:27.440 --> 00:23:32.640
that's yeah, I mean I think
it all It all depends too because like

276
00:23:33.000 --> 00:23:36.920
sometimes unfortunately as developers, we don't
have a choice, right like some guy,

277
00:23:37.559 --> 00:23:40.160
And and there is things to be
said even for these frameworks, like

278
00:23:40.680 --> 00:23:45.160
you do get a nice unified feel
for the app, right, So I

279
00:23:45.200 --> 00:23:48.960
mean you can go either way.
Like I don't want to. I don't

280
00:23:48.000 --> 00:23:52.079
want to put any framework or any
way of doing things down. It's just

281
00:23:52.359 --> 00:23:55.720
there's all these you know, there's
things to consider how how to use each

282
00:23:55.759 --> 00:23:59.279
of each one of them. Yeah, yeah, but you do consider that

283
00:23:59.400 --> 00:24:03.240
some of just some of those film
works kind of have like lending curves,

284
00:24:03.319 --> 00:24:07.720
right, yea, yeah, there
are firm the learning CAUs need to also

285
00:24:07.839 --> 00:24:11.480
kind of like for me personally,
right, But I use mater as kind

286
00:24:11.480 --> 00:24:15.079
of like the one with the highest
learning curves, right because I use that

287
00:24:15.279 --> 00:24:18.839
and for you to do certain things, you have to really understand a lot

288
00:24:18.880 --> 00:24:22.799
of things. I think. Then
usually I love around design for a simplicity,

289
00:24:22.920 --> 00:24:27.000
right then, Chucker, you are
check You're like simple in my opinion,

290
00:24:27.279 --> 00:24:32.759
if I to use like rebuilt you
have. So it depends on the

291
00:24:33.000 --> 00:24:36.799
complexity, right, Like some are
the learning covers, some are more than

292
00:24:37.119 --> 00:24:40.799
all. If when I want to
advise someone to just kind of set up

293
00:24:40.799 --> 00:24:45.880
a project that there's no really more
emphasis on certain things like maybe just want

294
00:24:45.880 --> 00:24:48.240
to set it up and do stop
to just show like maybe we have an

295
00:24:48.240 --> 00:24:52.799
investor, you just want to show
something up. There's probably be not in

296
00:24:52.920 --> 00:24:57.599
like an established design systems or so
if you just use like this simpler,

297
00:24:57.839 --> 00:25:02.119
you are this, you are in
the library. I think this spread of

298
00:25:02.200 --> 00:25:07.240
beta just as it's for setting functionalities
good agree, So there's a lending CoV

299
00:25:07.319 --> 00:25:11.599
in them. And I think this
aspect of published popularity route all those look

300
00:25:11.599 --> 00:25:15.039
at the wants to have more conflicts
and you know, pick the impact is

301
00:25:15.079 --> 00:25:18.359
easier to produce on us it.
Yeah, so that's just that's just it's

302
00:25:18.400 --> 00:25:26.279
good mhmmah. Yeah, that does
make a lot of sense. And to

303
00:25:26.319 --> 00:25:33.559
me, what I always look for
when I'm even considering any any such component

304
00:25:33.640 --> 00:25:38.680
libraries is just how much is going
to make my life easier in terms of

305
00:25:38.759 --> 00:25:45.839
providing accessibility because the functionalities are not
that hard, it's just accessibility. I

306
00:25:45.839 --> 00:25:52.920
think it's harder than the functionalities themselves, honestly, so I always think of

307
00:25:52.119 --> 00:25:56.480
things that are going to help me
out on that. And also they're not

308
00:25:56.559 --> 00:26:00.960
going to block the expansion of the
app afterwards, because a lot of UY

309
00:26:00.279 --> 00:26:10.279
libraries are simply just in English,
and that's a problem because it generally happens

310
00:26:10.279 --> 00:26:15.319
that eventually you will want to support
other languages in your application, and if

311
00:26:15.519 --> 00:26:18.240
SEO is important, you will want
to have server side rendering and stuff like

312
00:26:18.279 --> 00:26:25.359
that. So not all libraries tech
all those boxes. So because of that,

313
00:26:25.359 --> 00:26:27.880
that's what I was mentioning before,
Like, sometimes it's just easier for

314
00:26:27.920 --> 00:26:33.640
you to code it yourself, because
then whatever you choose to do internationalization,

315
00:26:34.119 --> 00:26:37.519
you can rest assured that it's going
to be the same way they're going to

316
00:26:37.519 --> 00:26:42.799
provide the internationalization for that particular component. Otherwise, like eventually, when you

317
00:26:42.839 --> 00:26:48.599
start doing internationalization, that particular library
is going to handle internationalization differently, and

318
00:26:48.640 --> 00:26:53.039
then you have different ways of providing
translation in different parts of your system.

319
00:26:53.440 --> 00:26:59.839
So that ends up overcomplicating things on
the long term. In the short term,

320
00:27:00.079 --> 00:27:03.759
do go faster, So it heavily
depends because at the same time,

321
00:27:03.799 --> 00:27:07.039
if you think too much about the
long term, then you never get there

322
00:27:07.519 --> 00:27:12.519
right because you over engineer from the
start. So I agree that there's definitely

323
00:27:12.559 --> 00:27:17.920
a room for such libraries, but
I would never choose the library that I

324
00:27:18.039 --> 00:27:22.920
know for sure is going to have
problems with accessibility or internationalization later on.

325
00:27:23.519 --> 00:27:29.119
Like that to me would be not
just a red flag, it would definitely

326
00:27:29.119 --> 00:27:33.640
be a blocker. But other than
that, if the library allows me to

327
00:27:34.079 --> 00:27:40.000
customize the visuals to my liking,
to comply with the design that I have

328
00:27:40.119 --> 00:27:47.359
for my application, if it is
accessible, it is used enough so that

329
00:27:47.400 --> 00:27:53.839
I know that it's not going to
die overnight, and it provides internationalization ideally

330
00:27:55.559 --> 00:27:59.839
in a very flexible manner, such
that I can deal with internationalization in the

331
00:28:00.039 --> 00:28:03.200
library the same way that I deal
with the rest of my system, then

332
00:28:03.240 --> 00:28:11.680
yeah, definitely, yeah, short, exactly, Accessibility is a very important

333
00:28:11.759 --> 00:28:15.640
to consider, right, So I
think for that, personally, I'll probably

334
00:28:15.200 --> 00:28:18.720
kind of give it to check how
you have accessibility. I think that's the

335
00:28:18.720 --> 00:28:23.799
one I really know that. Yeah, I think I have kind of the

336
00:28:23.880 --> 00:28:29.519
kind of a lot of boxes on
accessibility. I'm designed. I don't know,

337
00:28:29.559 --> 00:28:34.039
I think it beats well personally,
I kind of to like check car

338
00:28:34.119 --> 00:28:38.680
you mostly, but that yeah,
for internal intermalization, yeah, well you

339
00:28:38.759 --> 00:28:44.640
have to also consider the libraries without
the library supports it on that, and

340
00:28:44.839 --> 00:28:48.319
like you said, most most of
the time, it's probably better to just

341
00:28:48.480 --> 00:28:52.559
coude it for se from structure that
you can have this features because I think

342
00:28:52.759 --> 00:28:59.400
mature you also support like can support
that to work. I have no release

343
00:28:59.640 --> 00:29:03.960
in the to I think it doesn't
the way were then I think for what

344
00:29:03.039 --> 00:29:07.960
you say, I think it's much
easier and better to just develop it yourself,

345
00:29:07.039 --> 00:29:11.480
since if you have accessibility and modernization
and as a consigned for you.

346
00:29:12.079 --> 00:29:22.160
Yeah, I think that's those.
Yeah, okay, cool, So I

347
00:29:22.200 --> 00:29:26.640
think this kind of sums it up. I didn't mention too may many of

348
00:29:26.680 --> 00:29:29.359
the library that I use, because
as I said, I don't use that

349
00:29:29.400 --> 00:29:34.920
many. It's just honestly mostly style
Components and Telwin, but other than that

350
00:29:36.640 --> 00:29:40.640
not much. So these are the
only two that I would recommend. And

351
00:29:40.759 --> 00:29:45.400
besides that, I don't think there's
anything super valuable that we that we definitely

352
00:29:45.480 --> 00:29:51.759
need to mention in this topic.
So I believe we can start wrapping up.

353
00:29:51.880 --> 00:29:55.319
Unless Chris or Peter, you guys
have anything specifically you like to mention.

354
00:29:56.799 --> 00:30:00.200
No, that's cool, although I
would like to just drop the link

355
00:30:00.279 --> 00:30:06.319
for what did you want? Oh, yeah, definitely if I'm gonna send

356
00:30:06.319 --> 00:30:11.559
it on this Yeah, So just
to look at that and probably something and

357
00:30:11.680 --> 00:30:15.880
to use us kind of want to
check out. You can check it out

358
00:30:15.000 --> 00:30:19.079
you and those are shots and since
it's use it when you get that.

359
00:30:22.039 --> 00:30:26.039
Okay, Yeah, I'll drop the
two that I mentioned, the two that

360
00:30:26.119 --> 00:30:32.920
I like, mm hmmmm, nice. I'm sending those in the comment section.

361
00:30:33.119 --> 00:30:40.400
So if you want to check our
content on YouTube or Facebook conking,

362
00:30:40.480 --> 00:30:45.000
we we do streams of the podcast
and then you can find those lengths in

363
00:30:45.079 --> 00:30:52.279
the comment section there. All right, uh so let's do a quick round

364
00:30:52.279 --> 00:30:57.720
of promos. So, Chris,
anything you're working on you'd like to mention.

365
00:30:59.799 --> 00:31:03.680
Uh, I'm well, I don't
really have anything to share. I

366
00:31:03.680 --> 00:31:07.880
think Peter saw it on LinkedIn,
but uh, I'm building a way with

367
00:31:07.039 --> 00:31:15.079
AI to automate my software courses.
So you basically the goal will be that

368
00:31:15.160 --> 00:31:19.440
you post in something like as simple
as markdown and then you get like an

369
00:31:19.839 --> 00:31:26.519
automated video lesson out. But that'll
be yeah, probably unfortunately a month or

370
00:31:26.519 --> 00:31:30.960
two from now, when I can
finally have something to share. But otherwise,

371
00:31:30.000 --> 00:31:33.039
I just invite people to check out
the links that we're all posting.

372
00:31:33.400 --> 00:31:38.759
There's a lot of good good stuff
I'm seeing in these links. So you

373
00:31:38.799 --> 00:31:45.079
are drinking the AI kool aid.
Not it's a blend. It's a blend.

374
00:31:45.160 --> 00:31:48.920
I only I'm using a voice clone
and then the rest is actually like

375
00:31:49.079 --> 00:31:52.319
deterministic. I guess I'm using Yeah, I am using it. But as

376
00:31:52.359 --> 00:32:00.039
a converter like a translator. Yeah, I think really really cool, Like

377
00:32:00.319 --> 00:32:06.039
I can always for you to kind
of like like like and view the one

378
00:32:06.119 --> 00:32:08.960
that you're going to create with that. Yeah, that's three awesome, real

379
00:32:08.920 --> 00:32:13.279
awesome. Thanks. Yeah, yeah, we'll see, I'll see see where

380
00:32:13.279 --> 00:32:19.960
it goes. Yeah. Uh what
about you, Peter, Yeah, you

381
00:32:20.200 --> 00:32:22.920
so not in the land those rule. I think it's just for the links

382
00:32:23.119 --> 00:32:29.279
ship. I think you can check
this live result on kind of use them

383
00:32:29.319 --> 00:32:35.640
what you did? Yeah right cool? Uh well in my case, just

384
00:32:35.680 --> 00:32:38.920
gonna promote onvoid. So it's U
N V O I D dot com if

385
00:32:38.920 --> 00:32:45.960
you're interested in that. And basically
it offers design and software development services in

386
00:32:46.000 --> 00:32:52.000
the most risk free way possible.
So all the contracts are based on laws

387
00:32:52.000 --> 00:32:53.599
of your state. That's the first. So a lot of companies, you

388
00:32:53.680 --> 00:32:59.000
have to agree with the contract,
meaning the laws of whatever the company is

389
00:32:59.319 --> 00:33:01.519
in this case is going to be
whatever the client is. So that already

390
00:33:01.519 --> 00:33:07.480
provides a ton of safety. On
top of that, you can hire Onvoid

391
00:33:07.519 --> 00:33:10.559
task based, so you're only paying
after the tasks are delivered and approved by

392
00:33:10.599 --> 00:33:15.039
our team, so it really provides
you with a ton of safety on top

393
00:33:15.359 --> 00:33:20.880
of a two week money back guarantee
if you don't like what was provided during

394
00:33:20.920 --> 00:33:24.680
the first two weeks. So really, if you need help with design or

395
00:33:24.680 --> 00:33:30.200
software, there are really no reasons
for not to try out Onvoid. So

396
00:33:30.240 --> 00:33:35.880
if you're interested in that onvoid dot
com, highly recommend. Other than that,

397
00:33:36.400 --> 00:33:39.480
I think this is it, guys. Thank you so much. I

398
00:33:39.559 --> 00:33:44.079
have a lovely rest of the week
and I'll see you in the next week.