S3 E12: Creando un tema para VSCode

1
00:00:00,000 --> 00:00:11,000
Estás escuchando My typeof Radio

2
00:00:11,000 --> 00:00:19,000
Un podcast de desarrollo web en español

3
00:00:19,000 --> 00:00:25,000
Somos Axel Martínez

4
00:00:25,000 --> 00:00:27,000
Arturo Mosqueda

5
00:00:27,000 --> 00:00:29,000
Comenzamos

6
00:00:30,000 --> 00:00:59,980
¡Suscríbete al canal!

7
00:01:00,000 --> 00:01:01,040
cómo está la cosa.

8
00:01:02,280 --> 00:01:07,620
En el día a día he descubierto que normalmente necesito abrir

9
00:01:07,620 --> 00:01:09,260
diferentes repositorios a la vez.

10
00:01:09,440 --> 00:01:11,640
Cuando estoy trabajando con algún proyecto,

11
00:01:12,360 --> 00:01:15,820
que actualizo la librería, ahora tengo que volver a instalarla,

12
00:01:15,820 --> 00:01:21,300
y luego eso es la base del proyecto, y así.

13
00:01:21,760 --> 00:01:23,260
Entonces, una dependencia sobre otra.

14
00:01:23,260 --> 00:01:30,180
lo que yo generalmente hago en estos casos es tener un tema visual

15
00:01:30,180 --> 00:01:35,000
un tema de colores diferente para cada instancia de VS Code que tengo abierta

16
00:01:35,000 --> 00:01:38,960
pero bueno, la cosa es que cambiar de contextos en este caso

17
00:01:38,960 --> 00:01:44,300
pues no tiene un costo solo de tiempo sino como en energía mental

18
00:01:44,300 --> 00:01:50,020
y se va acumulando y se vuelve un poco más cansado trabajar en el proyecto en sí

19
00:01:50,020 --> 00:02:07,680
Y como siempre he sido muy fan de personalizar mi entorno de trabajo, no sé, ya te he contado antes, empezando por la terminal, en este caso ya estoy en una máquina personal que es una Mac y aquí uso Oh My Posh con ZSH y cosas así.

20
00:02:07,680 --> 00:02:12,060
el prompt lo tengo personalizado

21
00:02:12,060 --> 00:02:14,900
y bueno he buscado con el tiempo por ejemplo

22
00:02:14,900 --> 00:02:18,260
ahora uso un mouse vertical que se me acomoda muy bien

23
00:02:18,260 --> 00:02:22,040
y encontré el tamaño perfecto del teclado que quiero usar

24
00:02:22,040 --> 00:02:23,100
cosas como esas

25
00:02:23,100 --> 00:02:27,060
mientras haya oportunidad pues yo busco

26
00:02:27,060 --> 00:02:30,340
digamos este personalizar mi entorno de trabajo

27
00:02:30,340 --> 00:02:31,720
esa es toda la idea

28
00:02:31,720 --> 00:02:34,400
entonces VS Code pues no es la excepción

29
00:02:34,400 --> 00:02:36,560
Desde hace un tiempo pues estoy usando

30
00:02:36,560 --> 00:02:37,920
Como te contaba diferentes

31
00:02:37,920 --> 00:02:40,180
Temas para distintos repos

32
00:02:40,180 --> 00:02:42,260
Y con esto pues ya se dio un vistazo

33
00:02:42,260 --> 00:02:44,500
Cual de los archivos es el que estaba modificando

34
00:02:44,500 --> 00:02:46,520
En donde quiero hacer mi próximo cambio

35
00:02:46,520 --> 00:02:48,200
Donde está la siguiente

36
00:02:48,200 --> 00:02:49,460
Pantalla digamos

37
00:02:49,460 --> 00:02:52,360
Si entonces un color

38
00:02:52,360 --> 00:02:53,900
Diferente por repo es algo simple

39
00:02:53,900 --> 00:02:55,340
Pero funciona

40
00:02:55,340 --> 00:02:58,440
Un día jugando pues con todo esto

41
00:02:58,440 --> 00:03:01,000
Me encontré un tema monocromático

42
00:03:01,000 --> 00:03:02,560
Dije pues vamos a probarlo

43
00:03:02,560 --> 00:03:17,360
Al principio no me gustó mucho, era algo raro, todo monocromático, podía llegar a ser un poco incómodo, si a lo que estaba acostumbrado eran los diferentes temas con color.

44
00:03:17,840 --> 00:03:27,740
Luego me acordé que esos fueron básicamente los inicios de cuando yo empecé a usar computadoras, así era la pantalla monocromática y así es como aprendí a programar.

45
00:03:28,180 --> 00:03:30,840
Pero bueno, eso es más como un dato curioso.

46
00:03:30,840 --> 00:03:33,680
con el tiempo de estarlo usando

47
00:03:33,680 --> 00:03:35,040
me di cuenta que

48
00:03:35,040 --> 00:03:37,540
yo me sentía un poco mejor

49
00:03:37,540 --> 00:03:39,840
concentrado y como tenía

50
00:03:39,840 --> 00:03:41,880
menos ruido visual, mi mente

51
00:03:41,880 --> 00:03:43,940
según yo estaba menos

52
00:03:43,940 --> 00:03:44,920
saturada

53
00:03:44,920 --> 00:03:47,800
a lo mejor porque había menos estímulos

54
00:03:47,800 --> 00:03:49,820
menos como colores que me estaban gritando

55
00:03:49,820 --> 00:03:51,140
y tratando de llamar mi atención

56
00:03:51,140 --> 00:03:54,160
y para mí pues había un poco más de claridad

57
00:03:54,160 --> 00:03:55,980
así es como me sentí por lo menos

58
00:03:55,980 --> 00:03:57,760
creo que también influyó

59
00:03:57,760 --> 00:03:59,780
que el invierno estuviera

60
00:03:59,780 --> 00:04:02,780
presente mientras yo estaba como descubriendo

61
00:04:02,780 --> 00:04:04,580
todo esto, porque bueno en invierno

62
00:04:04,580 --> 00:04:06,320
hay un poquito menos de luz

63
00:04:06,320 --> 00:04:08,340
oscurece más pronto

64
00:04:08,340 --> 00:04:10,460
y cosas así ¿no?

65
00:04:10,460 --> 00:04:12,340
entonces yo siento que

66
00:04:12,340 --> 00:04:13,540
algo tuvo que ver todo esto

67
00:04:13,540 --> 00:04:16,240
entonces

68
00:04:16,240 --> 00:04:18,460
incluso con estos temas oscuros pues

69
00:04:18,460 --> 00:04:20,000
se volvía complicado la

70
00:04:20,000 --> 00:04:22,540
parte como de mantener la concentración y cosas ¿no?

71
00:04:24,140 --> 00:04:24,640
me di cuenta

72
00:04:24,640 --> 00:04:26,600
que este repo monocromático pues me ayudaba

73
00:04:26,600 --> 00:04:27,380
bastante

74
00:04:27,380 --> 00:04:31,840
No estaba tratando de competir con la poca luz que había a mi alrededor

75
00:04:31,840 --> 00:04:36,640
Y me sentía un poco menos fatigado al usarlo

76
00:04:36,640 --> 00:04:40,040
Entonces decidí, bueno, voy a usar este para el repo principal

77
00:04:40,040 --> 00:04:43,780
Aquí es donde voy a hacer el trabajo más arduo, más duro

78
00:04:43,780 --> 00:04:46,580
Y es el que más atención requiere

79
00:04:46,580 --> 00:04:49,320
Cualquier otro tema para los demás repositorios secundarios

80
00:04:49,320 --> 00:04:53,440
Pues ahí lo puedo trabajar

81
00:04:53,440 --> 00:04:55,120
Eso me funcionó

82
00:04:55,120 --> 00:05:02,580
y bueno, yo siendo yo me di cuenta que no era suficiente para mí

83
00:05:02,580 --> 00:05:05,340
porque ahora estaba cambiando entre colores y monocromático

84
00:05:05,340 --> 00:05:09,420
entonces había además partes que simplemente no funcionaban bien

85
00:05:09,420 --> 00:05:15,020
los comentarios eran difíciles de leer por el color que habían escogido

86
00:05:15,020 --> 00:05:18,500
que era demasiado tenue y demasiado parecido al fondo

87
00:05:18,500 --> 00:05:21,940
estos contrastes no eran suficientes

88
00:05:21,940 --> 00:05:25,080
algunas palabras reservadas y otros valores por ahí

89
00:05:25,080 --> 00:05:29,140
pues no me era suficiente como distinguir uno de otro

90
00:05:29,140 --> 00:05:33,660
poco a poco todo empezó a verse un poco igual

91
00:05:33,660 --> 00:05:37,060
y entonces empecé a perder lo que estaba buscando

92
00:05:37,060 --> 00:05:40,320
la capacidad de diferenciar entre unas cosas y otras

93
00:05:40,320 --> 00:05:43,580
como el chiste de todo de tener temas de colores

94
00:05:43,580 --> 00:05:49,060
la ventaja de VS Code es que puedes sobrescribir colores manualmente

95
00:05:49,060 --> 00:05:50,940
en tu configuración, incluso teniendo

96
00:05:50,940 --> 00:05:52,980
ya el tema instalado, entonces pues

97
00:05:52,980 --> 00:05:54,040
empecé a ajustar cosas

98
00:05:54,040 --> 00:05:57,360
rápidamente se volvió

99
00:05:57,360 --> 00:05:59,300
digamos que insostenible

100
00:05:59,300 --> 00:06:00,720
cada vez que cambias de repo

101
00:06:00,720 --> 00:06:03,140
cada vez que quieres cambiar un tema diferente

102
00:06:03,140 --> 00:06:05,080
había que repetir este proceso

103
00:06:05,080 --> 00:06:06,940
porque yo había modificado

104
00:06:06,940 --> 00:06:08,900
por ejemplo, dado que el tema

105
00:06:08,900 --> 00:06:11,100
es monocromático, pues yo quería cambiar las

106
00:06:11,100 --> 00:06:12,800
llaves y los paréntesis

107
00:06:12,800 --> 00:06:14,720
estos colorcitos que son

108
00:06:14,720 --> 00:06:17,000
el bracket match, pero lo tenía que

109
00:06:17,000 --> 00:06:23,420
hacer como para este repo y luego si quería volver a usar el tema en otro lado pues también ahí y

110
00:06:23,420 --> 00:06:30,940
entonces bueno se volvió algo un poco irónico no estaba intentando simplificar mi entorno y

111
00:06:30,940 --> 00:06:34,560
en realidad lo que estaba haciendo pues era complicarlo más me estaba distrayendo con

112
00:06:34,560 --> 00:06:41,440
toda esta parte de los temas si te ha pasado eso pues cuéntame por ahí debes tener alguna historia

113
00:06:41,440 --> 00:06:43,560
parecida en la que empiezas

114
00:06:43,560 --> 00:06:45,680
como a hacer tu propio side quest

115
00:06:45,680 --> 00:06:46,640
¿no? tratando de

116
00:06:46,640 --> 00:06:49,420
solucionar una cosa que no tiene nada que ver con

117
00:06:49,420 --> 00:06:51,180
el proyecto que estás haciendo

118
00:06:51,180 --> 00:06:53,340
pero bueno, regresamos

119
00:06:53,340 --> 00:06:55,540
aquí fue cuando llegó una pregunta

120
00:06:55,540 --> 00:06:57,380
para mí, una de esas que

121
00:06:57,380 --> 00:06:59,180
parecen pequeñas pero

122
00:06:59,180 --> 00:07:01,440
ya sabes que te vas a meter en problemas

123
00:07:01,440 --> 00:07:03,500
en un rabbit hole gigante

124
00:07:03,500 --> 00:07:05,080
del que quién sabe cuándo vas a poder salir

125
00:07:05,080 --> 00:07:07,340
y bueno

126
00:07:07,340 --> 00:07:09,180
la pregunta es ¿qué tan difícil sería

127
00:07:09,180 --> 00:07:10,920
crear mi propio tema?

128
00:07:10,920 --> 00:07:14,120
qué tanto cuesta en tiempo y en esfuerzo

129
00:07:14,120 --> 00:07:15,520
pues hacer un tema propio, ¿no?

130
00:07:15,560 --> 00:07:17,820
de qué se tratara, además pues esta curiosidad

131
00:07:17,820 --> 00:07:18,720
ya la tenía de antes

132
00:07:18,720 --> 00:07:21,960
pero bienvenido al rabbit hole, como dije

133
00:07:21,960 --> 00:07:23,920
empecé conversando con Claude

134
00:07:23,920 --> 00:07:25,340
así en la

135
00:07:25,340 --> 00:07:27,960
UI como web, no, yo no tengo

136
00:07:27,960 --> 00:07:29,360
cuenta ni nada, solo como esta

137
00:07:29,360 --> 00:07:31,560
cosa gratis que te dejan usar

138
00:07:31,560 --> 00:07:33,840
y pues ahí empecé

139
00:07:33,840 --> 00:07:35,360
¿no? como a platicar con la cosa

140
00:07:35,360 --> 00:07:37,800
y le decía, este tema no funciona

141
00:07:37,800 --> 00:07:39,400
pero

142
00:07:39,400 --> 00:07:40,800
quiero algunas variaciones

143
00:07:40,800 --> 00:07:48,860
entonces ya me empezó a regresar como estos cambios en el tema monocromático

144
00:07:48,860 --> 00:07:50,560
y pues que me funcionaban bien

145
00:07:50,560 --> 00:07:55,760
en un punto de esta conversación me di cuenta de algo

146
00:07:55,760 --> 00:07:59,180
me di cuenta que le podía pedir variaciones en el tinte

147
00:07:59,180 --> 00:08:02,400
o sea decirle déjalo todo monocromático

148
00:08:02,400 --> 00:08:09,700
no agregues otro color distinto pero haz que se vea más como más amarillo

149
00:08:09,700 --> 00:08:38,260
Y luego como ahora un turquesa, ahora azul, ¿no? Y entonces empecé a darme cuenta de que esas variaciones me estaban gustando pues bastante más, ¿no? Con eso me di cuenta que podía usar justamente lo que estaba buscando de tener este cambio de contextos por el color, pero además evitar esta fatiga que te decía antes, ¿no?

150
00:08:38,260 --> 00:08:42,420
De tener demasiados colores al mismo tiempo que están tratando de llamarme la atención y cosas así.

151
00:08:43,060 --> 00:08:44,920
Digamos que ahí fue donde llegó el click.

152
00:08:45,580 --> 00:08:50,020
De repente ya no era solo este único tema monocromático negro,

153
00:08:50,500 --> 00:08:57,360
fondo negro con letras claras en un solo tono, sino una especie como de sistemita.

154
00:08:57,720 --> 00:08:59,780
Así fue que nació Tlapalli.

155
00:09:00,500 --> 00:09:05,760
Tlapalli significa color en náhuatl o pigmento o tinte o algo así.

156
00:09:05,760 --> 00:09:12,920
y este Tlapali de VS Code es un tema, es una colección más bien de temas monocromáticos

157
00:09:12,920 --> 00:09:19,920
inspirados digamos en los nombres de los minerales, las piedras preciosas que generalmente puedes encontrar en México

158
00:09:19,920 --> 00:09:31,740
bueno los nombres los dejé en inglés pero es Obsidian, Gold, Turquoise, Quartz, Lápiz Lazuli, Amethyst, Jade y Fire Opal

159
00:09:31,740 --> 00:09:35,900
son los nombres que, bueno, dije, bueno, ya el nombre del tema es en nahuatl

160
00:09:35,900 --> 00:09:40,000
y luego, pues bueno, para que sea un poco más fácil de entender

161
00:09:40,000 --> 00:09:41,100
le dejamos los nombres en inglés

162
00:09:41,100 --> 00:09:44,480
pero sí, es el obsidiana

163
00:09:44,480 --> 00:09:53,360
oro, turquesa, cuarzo, lapislázuli, amatista, jade y ópalo de fuego

164
00:09:53,360 --> 00:09:56,200
son los nombres de los temas en español, digamos, ¿no?

165
00:09:57,520 --> 00:10:01,680
si te das cuenta, pues algunos son algo así como color cálido

166
00:10:01,680 --> 00:10:04,960
color frío, entonces están como uno y uno

167
00:10:04,960 --> 00:10:09,800
ese era como todo mi objetivo, era dejarlos así como

168
00:10:09,800 --> 00:10:14,100
intercaladitos para cuando los estás cambiando en el

169
00:10:14,100 --> 00:10:17,600
selector de temas de VS Code, pues puedas ver las diferencias un poco más

170
00:10:17,600 --> 00:10:20,320
contrastadas, ¿no?

171
00:10:21,200 --> 00:10:25,860
todos tienen sus versiones en dark mode, en color oscuro

172
00:10:25,860 --> 00:10:29,640
y también en light mode, y ahorita te cuento por qué es así

173
00:10:29,640 --> 00:10:32,060
y un poco de cómo llegué ahí

174
00:10:32,060 --> 00:10:34,460
estos temas light

175
00:10:34,460 --> 00:10:35,940
pues no estaban en el plano original

176
00:10:35,940 --> 00:10:37,820
de hecho, nacieron

177
00:10:37,820 --> 00:10:40,160
a partir de un script que creé

178
00:10:40,160 --> 00:10:42,200
para convertir justamente los temas

179
00:10:42,200 --> 00:10:44,380
del modo oscuro a un modo claro

180
00:10:44,380 --> 00:10:45,160
automáticamente

181
00:10:45,160 --> 00:10:48,420
fue una de estas exploraciones

182
00:10:48,420 --> 00:10:50,400
de platicar

183
00:10:50,400 --> 00:10:51,940
con la AI y decirle a Cloud

184
00:10:51,940 --> 00:10:54,340
ok, ahora la idea que yo tengo

185
00:10:54,340 --> 00:10:55,960
es que en mi

186
00:10:55,960 --> 00:10:57,320
editor de gráficos

187
00:10:57,320 --> 00:10:59,680
preferido que sea Inkscape

188
00:10:59,680 --> 00:11:01,700
yo puedo hacer como

189
00:11:01,700 --> 00:11:03,620
tomar una imagen y decirle

190
00:11:03,620 --> 00:11:05,740
quiero invertir estos colores, casi como si

191
00:11:05,740 --> 00:11:06,140
le hubiera

192
00:11:06,140 --> 00:11:08,860
sacado un filtro

193
00:11:08,860 --> 00:11:11,580
a la imagen y con eso

194
00:11:11,580 --> 00:11:13,800
obtuve un tema

195
00:11:13,800 --> 00:11:15,400
al revés

196
00:11:15,400 --> 00:11:16,480
el tema claro

197
00:11:16,480 --> 00:11:19,480
la idea mía era poder crear

198
00:11:19,480 --> 00:11:21,580
algún gráfico para poderlo

199
00:11:21,580 --> 00:11:23,140
poner en el readme y de pronto

200
00:11:23,140 --> 00:11:25,360
me salió esto del filtro y dije

201
00:11:25,360 --> 00:11:28,460
¿por qué no le digo al cloud que me haga algo parecido?

202
00:11:28,560 --> 00:11:29,760
cuando me di cuenta de que

203
00:11:29,760 --> 00:11:32,400
en lugar de pedirle

204
00:11:32,400 --> 00:11:34,740
específicamente que me diera la conversación

205
00:11:34,740 --> 00:11:36,460
los colores y le podía

206
00:11:36,460 --> 00:11:37,740
decir mejor hazme un script

207
00:11:37,740 --> 00:11:40,520
en este caso se lo pedí en TypeScript

208
00:11:40,520 --> 00:11:42,640
y que lo pudiera correr

209
00:11:42,640 --> 00:11:44,700
en Node, dame uno que pueda

210
00:11:44,700 --> 00:11:46,780
hacer esto, en vez de

211
00:11:46,780 --> 00:11:47,760
como gastarme

212
00:11:47,760 --> 00:11:50,660
hilo de la conversación en eso

213
00:11:50,660 --> 00:11:52,360
más bien crear el script

214
00:11:52,360 --> 00:11:53,760
y ahí lo voy ajustando

215
00:11:53,760 --> 00:11:55,140
y eso fue justo lo que hice

216
00:11:55,140 --> 00:12:04,600
Entonces, bueno, así nacieron las variaciones claras de cada uno de los temas y la verdad es que estoy muy contento con ellas.

217
00:12:05,120 --> 00:12:17,880
Ya luego vino como una parte de un tiempo en el que estuve modificando colores a mano y cosas así, encontrando las llaves específicas en la definición del tema que quería cambiar.

218
00:12:17,880 --> 00:12:21,040
hay una página donde está la documentación

219
00:12:21,040 --> 00:12:23,060
y te dice si quieres cambiar esta parte

220
00:12:23,060 --> 00:12:25,540
así se llama la llave que quieres cambiar

221
00:12:25,540 --> 00:12:27,460
y generalmente pues tienes

222
00:12:27,460 --> 00:12:29,140
el background y el foreground

223
00:12:29,140 --> 00:12:31,680
y un borde para varias cosas

224
00:12:31,680 --> 00:12:34,600
y por ejemplo te cuento rápido

225
00:12:34,600 --> 00:12:36,320
la parte de los widgets

226
00:12:36,320 --> 00:12:37,520
todos los tooltips

227
00:12:37,520 --> 00:12:39,640
todas las cajitas de información

228
00:12:39,640 --> 00:12:42,300
que aparecen por encima de VS Code

229
00:12:42,300 --> 00:12:45,940
yo las decidí a hacer un poquito contrastadas

230
00:12:45,940 --> 00:12:46,940
bajarles un poquito

231
00:12:46,940 --> 00:12:49,420
vamos a insubirles el brillo en el caso del tema oscuro

232
00:12:49,420 --> 00:12:53,700
y hacerlas un poco distintas del fondo

233
00:12:53,700 --> 00:12:55,220
cosas por el estilo

234
00:12:55,220 --> 00:12:59,340
ya tenía un sistema que me permitía

235
00:12:59,340 --> 00:13:01,540
primero tomar el tema monocromático

236
00:13:01,540 --> 00:13:05,200
después hacerle un tinte para cambiar el color

237
00:13:05,200 --> 00:13:08,820
ahora podía también invertir todo ese tema tintado

238
00:13:08,820 --> 00:13:12,120
y hacer un tema claro

239
00:13:12,120 --> 00:13:13,900
para que fuera fondo claro

240
00:13:13,900 --> 00:13:16,200
y letras oscuras

241
00:13:16,200 --> 00:13:22,200
y ya sabía cómo crear este paquete y todo, seguí la documentación

242
00:13:22,200 --> 00:13:28,780
pero ahora quería compartirlo, dije pues por qué no, ahora sí ya lo libero y ya

243
00:13:28,780 --> 00:13:32,960
también de esta forma lo puedo utilizar como instalarlo

244
00:13:32,960 --> 00:13:37,680
y utilizarlo, distribuirlo e instalarlo en la computadora del trabajo

245
00:13:37,680 --> 00:13:40,200
donde también uso VS Code además de la personal

246
00:13:40,200 --> 00:13:45,340
entonces decidí hacer bien el Readme y comencé a investigar

247
00:13:45,340 --> 00:13:48,040
como qué anda con lo del logo y ese tipo de cosas.

248
00:13:49,080 --> 00:13:49,960
Y bueno, así acabé.

249
00:13:50,420 --> 00:13:53,180
En Inkscape creando el logo

250
00:13:53,180 --> 00:13:55,420
a partir como igual de una idea rápida

251
00:13:55,420 --> 00:13:59,060
que generé por ahí con una herramienta

252
00:13:59,060 --> 00:13:59,940
que se llama Ideogram.

253
00:14:00,860 --> 00:14:02,800
Y luego pues ya a mano hice el logo

254
00:14:02,800 --> 00:14:04,080
porque la idea solo la tenía,

255
00:14:04,240 --> 00:14:06,940
pero no quería nada más copiar y pegar esa imagen.

256
00:14:07,380 --> 00:14:09,520
Además de que después me iba a servir para otra cosa.

257
00:14:09,880 --> 00:14:10,580
Ahorita te cuento rápido.

258
00:14:11,660 --> 00:14:12,780
Involucrado con todo esto,

259
00:14:12,900 --> 00:14:14,060
pues también tenemos un website

260
00:14:14,060 --> 00:14:16,440
que justamente es hacia donde iba

261
00:14:16,440 --> 00:14:18,640
en Tlapali

262
00:14:18,640 --> 00:14:21,280
es con doble L al final

263
00:14:21,280 --> 00:14:23,860
T-L-A-P-A-L-I

264
00:14:23,860 --> 00:14:26,240
Tlapali.axel.dev

265
00:14:26,240 --> 00:14:28,840
Axel es como escribo mi nombre normalmente

266
00:14:28,840 --> 00:14:29,720
si ya me conoces

267
00:14:29,720 --> 00:14:32,380
A-C-K-Z-E-L-L

268
00:14:32,380 --> 00:14:34,200
.dev

269
00:14:34,200 --> 00:14:36,020
Tlapali.axel.dev

270
00:14:36,020 --> 00:14:38,260
te dejo el link en las notas del show de cualquier forma

271
00:14:38,260 --> 00:14:40,560
ahí puedes encontrar todos los temas

272
00:14:40,560 --> 00:14:42,900
y los colores, las variaciones

273
00:14:42,900 --> 00:14:44,880
Además de algunos screenshots

274
00:14:44,880 --> 00:14:46,820
Que ahorita te cuento

275
00:14:46,820 --> 00:14:49,380
Fue muy interesante poder desarrollar este website

276
00:14:49,380 --> 00:14:52,080
En realidad fue su propio proyecto

277
00:14:52,080 --> 00:14:54,000
Está hecho con Noxt 4

278
00:14:54,000 --> 00:14:55,900
Y es un sitio estático

279
00:14:55,900 --> 00:14:57,140
Tiene

280
00:14:57,140 --> 00:14:58,780
OG Images

281
00:14:58,780 --> 00:15:01,560
Tiene un header con efecto de

282
00:15:01,560 --> 00:15:03,000
Así como de Frosted Glass

283
00:15:03,000 --> 00:15:05,700
Hay una técnica por ahí que aprendí de Josh Como

284
00:15:05,700 --> 00:15:07,760
Por si has escuchado de él

285
00:15:07,760 --> 00:15:10,220
Tiene un blog post muy interesante

286
00:15:10,220 --> 00:15:11,300
Acerca de cómo hacer esto

287
00:15:11,300 --> 00:15:14,520
y bueno, si lo visitas desde tu celular

288
00:15:14,520 --> 00:15:16,160
tiene un poquito de haptic feedback

289
00:15:16,160 --> 00:15:18,980
que es básicamente como tú le picas a algunas cosas

290
00:15:18,980 --> 00:15:21,480
y tu teléfono va a hacer una pequeña vibración

291
00:15:21,480 --> 00:15:24,360
trate de no hacerlo demasiado incómodo o molesto

292
00:15:24,360 --> 00:15:27,380
pero bueno, me gustó agregar esa librería

293
00:15:27,380 --> 00:15:30,240
tienes un poquito de sonido también

294
00:15:30,240 --> 00:15:34,760
y en fin, el logo lo utilicé para crear el menú

295
00:15:34,760 --> 00:15:36,380
entonces yo te invito a que la visites

296
00:15:36,380 --> 00:15:37,600
y bueno, ya me des tus comentarios

297
00:15:37,600 --> 00:15:40,340
esta parte ha sido

298
00:15:40,340 --> 00:15:42,560
super agradable

299
00:15:42,560 --> 00:15:44,660
digamos en todo este proyecto

300
00:15:44,660 --> 00:15:45,520
de crear el tema

301
00:15:45,520 --> 00:15:48,600
porque lo expandí a que no fuera solamente

302
00:15:48,600 --> 00:15:50,120
el tema en sí pero

303
00:15:50,120 --> 00:15:52,680
primero las variaciones, luego crear el logo

304
00:15:52,680 --> 00:15:53,460
que a mi me encanta

305
00:15:53,460 --> 00:15:56,660
pasar el tiempo con Inkscape y aprender cosas nuevas

306
00:15:56,660 --> 00:15:57,760
cada vez que trabajo con él

307
00:15:57,760 --> 00:16:00,580
crear el website, practicar un poquito

308
00:16:00,580 --> 00:16:02,180
con esto de Nox, de CSS

309
00:16:02,180 --> 00:16:03,880
aprender técnicas nuevas

310
00:16:03,880 --> 00:16:05,920
y cosas por el estilo

311
00:16:05,920 --> 00:16:09,240
son detalles que realmente pues nadie te pide

312
00:16:09,240 --> 00:16:12,580
y a nadie le interesa

313
00:16:12,580 --> 00:16:14,920
yo creo realmente que si tiene todas estas cosas

314
00:16:14,920 --> 00:16:18,380
pero a mí me interesa, a mí me gusta

315
00:16:18,380 --> 00:16:21,460
y a mí me importa vaya

316
00:16:21,460 --> 00:16:24,260
que cada detalle sea

317
00:16:24,260 --> 00:16:26,640
como muy cuidado

318
00:16:26,640 --> 00:16:29,980
no solo para el website y lo que te decía de los efectos

319
00:16:29,980 --> 00:16:31,580
del responsiveness

320
00:16:31,580 --> 00:16:35,020
de cómo manejo cada imagen

321
00:16:35,020 --> 00:16:39,120
en el tema en sí, en cada widget

322
00:16:39,120 --> 00:16:41,720
como te decía antes, en cada línea, cada borde

323
00:16:41,720 --> 00:16:44,860
que si seleccionas algo, que si coinciden

324
00:16:44,860 --> 00:16:48,480
las palabras que estás haciendo

325
00:16:48,480 --> 00:16:51,580
el highlight, todos esos colores que están disponibles

326
00:16:51,580 --> 00:16:54,320
ya para ser modificados, casi a todo

327
00:16:54,320 --> 00:16:56,620
le metí las manos y traté de que

328
00:16:56,620 --> 00:16:59,740
fuera uniforme y de que fuera

329
00:16:59,740 --> 00:17:02,960
consistente más que uniforme, que se viera bien

330
00:17:02,960 --> 00:17:04,760
vaya, aunque fuera monocromático

331
00:17:04,760 --> 00:17:06,260
eso era importante para mí

332
00:17:06,260 --> 00:17:09,080
en fin, para llegar

333
00:17:09,080 --> 00:17:10,900
a todo este

334
00:17:10,900 --> 00:17:12,960
digamos, no le quiero decir ecosistema

335
00:17:12,960 --> 00:17:15,120
pero todo esto que está alrededor

336
00:17:15,120 --> 00:17:16,780
del tema hubo pues

337
00:17:16,780 --> 00:17:19,340
herramientas que construí, cosas por ejemplo

338
00:17:19,340 --> 00:17:20,300
para crear el website

339
00:17:20,300 --> 00:17:23,060
pude experimentar

340
00:17:23,060 --> 00:17:24,480
un poco y meterme ahí como

341
00:17:24,480 --> 00:17:26,880
que si hago un script de Apple

342
00:17:26,880 --> 00:17:29,380
como del sistema operativo

343
00:17:29,380 --> 00:17:30,500
o si hago

344
00:17:30,500 --> 00:17:32,560
cualquier otra cosa

345
00:17:32,560 --> 00:17:37,700
poder experimentar y platicar con esta cosa del cloud

346
00:17:37,700 --> 00:17:39,120
y decirle oye quiero hacer esto

347
00:17:39,120 --> 00:17:42,960
me está tomando muchísimo tiempo hacer cada screenshot

348
00:17:42,960 --> 00:17:44,300
de cada variación del tema

349
00:17:44,300 --> 00:17:48,260
y luego tengo que cortar cada parte que quiero mostrar en un website

350
00:17:48,260 --> 00:17:49,740
entonces dije ok

351
00:17:49,740 --> 00:17:53,580
vamos primero a investigar cómo puedo hacer

352
00:17:53,580 --> 00:17:56,460
la toma de los 16 screenshots

353
00:17:56,460 --> 00:17:58,020
sin tener que meter yo las manos

354
00:17:58,020 --> 00:17:59,520
y que sea automatizado

355
00:17:59,520 --> 00:18:03,340
y después dije ok si podemos hacer cosas con SVG

356
00:18:03,340 --> 00:18:05,260
creo que puedo hacer algo con Inkscape

357
00:18:05,260 --> 00:18:07,020
crear una especie de plantilla

358
00:18:07,020 --> 00:18:10,660
y luego pedirle a un script que tome esa plantilla

359
00:18:10,660 --> 00:18:14,240
y empiece a cortar los screenshots

360
00:18:14,240 --> 00:18:18,280
para que sea justamente en la porción que yo quiero mostrar dentro del website

361
00:18:18,280 --> 00:18:19,220
y así es como lo hice

362
00:18:19,220 --> 00:18:21,520
pues no hice los scripts a mano

363
00:18:21,520 --> 00:18:23,880
creo que de lo que han platicado ya muchas personas

364
00:18:23,880 --> 00:18:26,160
que están pues dentro del área

365
00:18:26,160 --> 00:18:30,700
tal vez ya no vamos a escribir cosas tan manualmente

366
00:18:30,700 --> 00:18:32,120
no vamos a teclear el código

367
00:18:32,120 --> 00:18:37,580
pero definitivamente vamos a necesitar como esta interacción

368
00:18:37,580 --> 00:18:41,980
y estos ciclos de darle retroalimentación a las herramientas

369
00:18:41,980 --> 00:18:44,800
que construyen el código

370
00:18:44,800 --> 00:18:47,940
pero siempre bajo nuestra supervisión

371
00:18:47,940 --> 00:18:53,540
y creo que eso es una manera válida

372
00:18:53,540 --> 00:18:56,900
y que me ha resultado bastante útil a mí por lo menos

373
00:18:56,900 --> 00:19:04,260
de cómo he entrado en esta nueva era de usar la inteligencia artificial.

374
00:19:05,060 --> 00:19:09,480
Ya luego hacemos un episodio, tengo una idea para eso al respecto,

375
00:19:09,480 --> 00:19:13,000
pero bueno, poquito platicarte de esta experiencia que he tenido

376
00:19:13,000 --> 00:19:19,200
y ha sido por lo menos interesante y te digo la parte de la creatividad,

377
00:19:19,480 --> 00:19:23,460
de poder hacer algo por lo que no estoy presionado contra el tiempo,

378
00:19:23,540 --> 00:19:26,220
por lo que no estoy restringido

379
00:19:26,220 --> 00:19:27,960
por las tecnologías que debo usar

380
00:19:27,960 --> 00:19:29,680
y cosas por el estilo

381
00:19:29,680 --> 00:19:31,920
creo que esa es la gran maravilla

382
00:19:31,920 --> 00:19:33,640
y la cosa bonita de hacer proyectos

383
00:19:33,640 --> 00:19:36,600
los proyectos aparte

384
00:19:36,600 --> 00:19:37,720
los side projects

385
00:19:37,720 --> 00:19:40,100
para terminar

386
00:19:40,100 --> 00:19:41,900
lo que te decía que empezó como un

387
00:19:41,900 --> 00:19:44,180
solo repo de un tema

388
00:19:44,180 --> 00:19:45,720
monocromático modificado por mí

389
00:19:45,720 --> 00:19:46,760
se convirtió

390
00:19:46,760 --> 00:19:49,920
poco a poco en diferentes

391
00:19:49,920 --> 00:19:52,020
cosas, en el tema, el website

392
00:19:52,020 --> 00:19:55,180
el logo que también estuve modificando

393
00:19:55,180 --> 00:19:57,280
y aprendiendo cosas, un poquito de geometría por ahí

394
00:19:57,280 --> 00:20:01,280
un repo que tiene estos scripts que te digo

395
00:20:01,280 --> 00:20:03,540
las plantillas, todo esto

396
00:20:03,540 --> 00:20:06,080
es la parte que me llevó del proceso

397
00:20:06,080 --> 00:20:09,300
no solo fue ese momento de inspiración

398
00:20:09,300 --> 00:20:13,020
pero hubo iteración

399
00:20:13,020 --> 00:20:16,000
bastante fricción en algunas partes

400
00:20:16,000 --> 00:20:19,280
fue algo que tuve que repetir

401
00:20:19,280 --> 00:20:28,440
Repetir suficientes veces hasta que me quedó la idea clara de cómo lo quería automatizar y cosas por el estilo.

402
00:20:30,000 --> 00:20:38,240
Poco a poco de algo relativamente pequeño se convirtió en algo que ahora estoy cómodo compartiendo y hasta creando este episodio del podcast.

403
00:20:38,940 --> 00:20:46,040
Pero bueno, esa es rápidamente la historia, a lo mejor no tan rápida, pero si te llama la atención te cuento.

404
00:20:46,040 --> 00:20:49,020
búscalo como Tlapali en el Marketplace

405
00:20:49,020 --> 00:20:52,160
también lo puedes encontrar en el OpenVSX en el Registry

406
00:20:52,160 --> 00:20:55,080
que bueno, este lo utilizan otras herramientas

407
00:20:55,080 --> 00:20:56,400
que no son VS Code necesariamente

408
00:20:56,400 --> 00:21:00,700
y puedes ver como te decía

409
00:21:00,700 --> 00:21:04,580
todo en el website de tlapali.axel.dev

410
00:21:04,580 --> 00:21:08,800
si hay algo en tu entorno que te está molestando

411
00:21:08,800 --> 00:21:12,000
a lo mejor no necesitas adaptarte tú

412
00:21:12,000 --> 00:21:15,320
tal vez puedes construir algo mejor

413
00:21:15,320 --> 00:21:16,800
que te funcione a ti

414
00:21:16,800 --> 00:21:19,420
y esa sería la idea

415
00:21:19,420 --> 00:21:19,960
¿va?