Café con Tech

Jelly Drops, Design and Testing with Colby Fayock

August 09, 2021 Matias Hernández / Colby Fayock Season 3 Episode 4
Café con Tech
Jelly Drops, Design and Testing with Colby Fayock
Show Notes Transcript Chapter Markers

The astro coder came to visit!!
Colby Fayock, developer advocate at applitools is a passionate creator and developer. Colby have amazing content across multiple channels and media. In this episode we talk about some of his content an din particular about his Jelly Drops: Fundamentals of Javascript series and his amazing course: From Design to Development Crash Course a full course to create a full web application including design, coding, authentication and more.

We also talk about his love for the JAMStack, github actions and testing.

Find more from Colby's content in:
- colbyfayock.com/newsletter
- journeyto.dev a 7-week email course focused on developer the human-centered skills required for your own journey.
- 50 react projects Dive in with 50 projects complete with project briefs and wireframes!
- Colby's Youtube Channel
- Talk: Put down the Javascript:  Level Up With the Fundamentals of Web Development
- Twitter:

 Music Credits

Opening and Outro Music by DanoSongs https://danosongs.com/

Background Music Music:

Cool Rock by Kevin MacLeod Link: https://incompetech.filmmusic.io/song/3925-iron-bacon License: https://filmmusic.io/standard-license


Auth0
Auth0 es una plataforma de autenticación y autorización lista para usar en tu app!

Cloundinary MDE
Energizing a diverse community of developers to share knowledge using media technology in web apps.

Escuela Frontend
Conviértete en un Frontend Dev Profesional Contenido de alta calidad para mejorar tu carrera!

Support the show (https://www.buymeacoffee.com/matiasfha)

Español

Matias: [00:00:00] Bienvenidos a este nuevo episodio de Café con Tech en esta temporada especial en inglés hoy conmigo está el propio Astro coder. Colby Fayock viene desde el espacio con nosotros. Bienvenido Colby al programa.

[00:00:14] Y gracias por estar aquí.

[00:00:16] Colby: [00:00:16] Hey Matias. Muchas gracias por recibirme. 

[00:00:18] es un placer estar aquí. 

[00:00:20] Matías: [00:00:20] Estoy muy emocionado de tenerte aquí. Fui lo suficientemente valiente y no me enfrenté a ti en, en tu desafío. Así que sí, en caso de que no lo sepas, Colby tiene un reto en Twitch que desafió a los desarrolladores a enfrentarse a alguna característica imposible en una hora y sí, ha sido, es increíble. Y creo que el único que falla fui yo.

[00:00:44] Así que 

[00:00:44] Colby: [00:00:44] no, 

[00:00:45] Matías: [00:00:45] sí. Gracias a mi ordenador. Eso estaba metido en diferentes cosas, pero es un programa increíble. Deberías ir y echarle un vistazo. Y en caso de que no sepas quién es Colby, ¿podrías hacer una rápida introducción biográfica de 

[00:01:00] ¿usted mismo?

[00:01:01] Colby: [00:01:01] Me encantaría, así que sí, soy Colby Fayock. Soy un defensor de los desarrolladores en applitools. Antes de eso he sido un diseñador de UX e ingeniero de front-end por un tiempo. Y yo sólo, me encanta todo lo relacionado con la web. Me encanta ser capaz de. Y construir experiencias para la web. Y JAMstack ha sido algo así como mi cosa últimamente.

[00:01:19] Me gusta mucho trabajar con NextJS. . Así que hago un montón de creación de contenidos, la creación de contenidos educativos, donde creo como tutoriales y tutoriales de vídeo en YouTube. Y también soy un instructor egghead junto con usted Matias y es muy divertido. Yo, yo, yo disfruto de ser capaz de ayudar a otras personas a aprender a codificar y Sí, eso es, eso es donde yo, lo que me llevó a la función de convertirse en un defensor del desarrollador.

[00:01:41] Matias: [00:01:41] Sí, eso es, eso es una especie de, no sé el tema común en torno a estos programas que la mayoría de los invitados son tan duro en torno a la creación de contenidos, las relaciones con los desarrolladores o material educativo. Pero en el episodio anterior tuvimos a Kent, tuvimos a Kevin, tuvimos a Sam, así que todos están haciendo su propio trabajo en diferentes lugares.

[00:02:03]Enseñando a otros, ayudando a otros a subir de nivel en sus carreras en tu caso, tienes un montón de cosas eres una especie de máquina de creación de contenidos y , si quieres tratar de seguir con eso únete al boletín de Colby donde puedes amablemente recordarnos que estás haciendo un montón de cosas que en realidad es difícil de mantener 

[00:02:26] con en una de las cosas que estás estás haciendo.

[00:02:29] Y realmente me encanta. Es la, la jalea cae estos pequeños videos cortos que estás haciendo en YouTube sobre los fundamentos de JavaScript, tipo de lo básico de JavaScript. ¿Puedes, puedes decirnos por qué estás empezando con eso y cuál es el objetivo?

[00:02:43] Colby: [00:02:43] Sí. Claro, tradicionalmente mucho de mi contenido gira en torno a la creación de un proyecto en el que tengo un objetivo final, ya sea algún tipo de aplicación como la que estaba trabajando hoy era añadir autenticación a una aplicación. Pero una cosa en la que realmente no me he centrado es en los fundamentos de JavaScript, particularmente en cosas como los operadores, donde el último que puse fue con, async/await donde es, donde puedes crear una promesa dentro de JavaScript y crear funciones asíncronas.

[00:03:11]Y su. Creo que la gente se sienten atraídos por la forma en que crear contenido, porque soy muy directo. Y hasta el punto de que algunas personas tipo de añadir como la pelusa y no estoy diciendo, ya sabes, la gente tiene diferentes formas de presentar el contenido y la educación 

[00:03:24] Matias: [00:03:24] No estamos juzgando a nadie. 

[00:03:26] Colby: [00:03:26] Sí, exactamente, exactamente.

[00:03:27] Pero yo sólo, me gusta entrar, tratar de enseñar los conceptos y cómo siento que alguien puede aprender. Y quería aplicar eso a los aspectos fundamentales de la misma, donde si alguien está viendo uno de mis videos, pero no saben cómo funciona async/await. Tal vez pueden saltar a esta gota de jalea fundamental donde pueden obtener una visión rápida de cómo es.

[00:03:45] Así que camino a través de exactamente como lo que es. Yo trabajo a través de sólo realmente simple, como la secuencia de comandos de implementación. Mostrar una idea de lo que parece. Y la gente ha dicho que ha estado ayudando, así que quiero seguir haciéndolos. Creo que son divertidos. Y es otra forma de explorar un formato diferente, un poco diferente de lo que suelo hacer. 

[00:04:05] Matias: [00:04:05] Sí. Me gusta eso, es una especie de, todo el contenido que se crea algo grande como este no sé, la creación de nuestra cosita NextJS y el código, sólo el código que y, pero hay pequeñas cosas que se van en las grietas y la gente puede ir a la gota de jalea y averiguar lo que era eso.

[00:04:27] ¿Cree usted que este tipo de tendencia aquí que tiene estos usted y otros tienen este material realmente denso, como los proyectos, pero hay un montón de gente que está actualmente la transición en el desarrollo y los fundamentos y el camino más fácil, las cosas simples que la primera cosa que usted necesita para aprender son tipo de 

[00:04:47] ¿se retrasa en algún momento?. 

[00:04:49] Colby: [00:04:49] Sí, no, creo que es algo interesante porque creo que lo que atrae a la gente al desarrollo, y en mi caso también fue así, es poder construir algo emocionante, donde siempre me gusta hacer referencia a que lo primero que me hizo entrar en el desarrollo fue crear perfiles de MySpace y el equipo de Counterstrike, un sitio web.

[00:05:10] Y bandas y cosas. Y como, fue realmente por interés propio que yo estaba aprendiendo cómo hacer estas cosas porque yo estaba emocionado por ello. Y estaba motivado para seguir aprendiendo y cómo hacerlo. Y ahí es donde trato de aplicar, incluso cuando estoy haciendo algo, si estoy tratando de aprender algo, quiero tratar de aplicarlo a algo.

[00:05:26] Un tipo de mundo real en el que puedo entender el tipo de trabajo a través de eso. Así que, entiendo totalmente la idea de que la gente quiere encontrar estas cosas interesantes para ser capaz de trabajar a través de una nueva tecnología para aprender de esa manera. Personalmente creo que aprender haciendo es como mi mantra donde, como, creo que es una manera muy, muy poderosa de aprender algo es realmente haciendo algo.

[00:05:46]Así que por eso traté de aplicar eso a lo que estoy aprendiendo, pero también hay mucho que decir acerca de los fundamentos. Sé, como algunas de las cosas que he hablado en el pasado es cosas como SEO y la accesibilidad, donde alguien podría completamente, sobre-ingeniería de un componente de reacción, por ejemplo, donde se puede obtener una gran cantidad de esas cosas fuera de la caja.

[00:06:05] Y el, el tipo de cosa irónica es cuando usted. Sobredimensionado. Algunas de esas cosas, se pierde una gran cantidad de las características de SEO y la accesibilidad que podría haber obtenido de forma gratuita con las herramientas del navegador. Y te habría ahorrado una tonelada de tiempo. Y por supuesto, eso es, ya sabes, eso no es cada caso de uso, pero creo que es sólo un ejemplo que ilustra por qué los fundamentos pueden ser importantes. 

[00:06:23] Matías: [00:06:23] Sí. Lo que pienso sobre los fundamentos es que a veces son pasados por alto por los principiantes realmente los chicos mayores que como que tienden a preocuparse mucho por eso porque en mi opinión, he visto una gran cantidad de bases de código en algún momento es una especie de gente está escribiendo cosas, pero hay algunos pequeños detalles que es sólo JavaScript.

[00:06:47]Así que me gusta mucho, y de hecho, tienes una charla sobre eso. Como poner abajo 

[00:06:52] el JavaScript. Sí. 

[00:06:54] Colby: [00:06:54] Y está en, está en egghead. Puedes verlo como una grabación, está grabado en egghead, quiero decir, es Put Down the JavaScript Level Up With The Fundamentals of Web D evelopment. Y hablé a través de algunos ejemplos, una especie de resumen básico de los fundamentos de la web, pero por qué son realmente importantes.

[00:07:10] Así que si, si...

[00:07:11] suena interesante, definitivamente lo compruebo. Yo, yo, creo que es probablemente una de mis charlas favoritas que he dado, sólo porque creo que tiene un montón de cosas de gran alcance allí. Pero, sí, es definitivamente es está disponible en charlas egghead.io.

[00:07:23] Matías: [00:07:23] Es divertido. O sea, no quiero enchufar algo, pero en realidad lo estoy haciendo. Bueno, estaba escribiendo una especie de micro curso para el boletín, en español. Creo que lo traduciré sobre JavaScript moderno o Javascript para react o Javascript cualquier cosa. No puedodecidir el nombre. Y aprendí mucho sólo escribiendo y revisando la documentación sobre, no sé, un resto, operadores de propagación y coalescencia nula y todo eso.

[00:07:52] Y es como, wow, hay mucho más aquí que sólo usarlo. Así que revisa esa charla, revisa las gotas de jalea porque aprenderás algo, incluso si eres un desarrollador experimentado de todos modos, 

[00:08:05] Colby: [00:08:05] y otro comentario rápido sobre este tema. Creo que mucha gente también echa de menos eso, como cuando vas a través de los tutoriales de otras personas, podrías pensar como, ¿cómo es que estos desarrolladores experimentados ya saben todas estas cosas? Y creo que una de las cosas es que no están, no están enseñando esos fundamentos porque son una especie de.

[00:08:20] Pasar por alto esas cosas porque son una especie de conocimiento fundamental para ellos. Así que si ves algo así en un tutorial, trata de identificar eso y.

[00:08:27] intenta buscar lo que es y puedes aprender esos fundamentos mientras trabajas en esos proyectos más interesantes. 

[00:08:33] Matías: [00:08:33] Sí. También nuestro lenguaje de elección, Javascript, o TypeScript. Si eres más, te importa un poco más, 

[00:08:41]Es un siempre, es decir, después de que hayas probado con TypeScript y funcione bien, no puedes volver al JavaScript plano. Sí. 

[00:08:52] Colby: [00:08:52] Sí. 

[00:08:52] Matías: [00:08:52] Raro. Pero si, si te gusta JavaScript, ya sabes, que es un lenguaje siempre cambiante que cambió demasiado, en mi opinión, para bien, porque en realidad le está agregando cosas buenas, pero demasiado, la versión reciente exactamente es que es en realidad, creo que es 12.

[00:09:14] El número de la cosa ECMAScript para este año. Viene con un montón de , nuevos operadores y cosas. Así que si usted quiere utilizar fuera de todos los poderes, tengo que entender de dónde viene. El dolor que, que el dolor, la comunidad sufrió para crear esa nueva cosa. 

[00:09:31] Colby: [00:09:31] Absolutamente. 

[00:09:32] Matias: [00:09:32] Y otras cosas que tú, mencionaste, ya mencionaste esto, solías crear tipo de cosas grandes, como cursos grandes, videos grandes.

[00:09:41] Y una de las grandes cosas es esto del diseño al curso de desarrollo, ese curso intensivo que se crea en Youtube. Eso es crash, pero sigue siendo tres horas y media, pero es una tonelada de cosas allí. Así que cómo eso viene a ser y lo que la gente puede 

[00:10:00] encontrar en ese video. 

[00:10:02] Colby: [00:10:02] Claro. Es curioso que hayas mencionado el aspecto del curso intensivo, porque realmente uso la palabra curso intensivo porque vi a otros YouTubers usar ese término y no sabía qué decir. Así que por eso me decanté por eso. Pero sí, por lo que, comenzó por. La gente me pedía que hiciera un contenido largo en lugar de mis tutoriales, que suelen durar entre cinco y quince minutos.

[00:10:24]Así que la gente quería ver. Lo que se vería como si yo construí un tutorial donde realmente fleshed proyecto entero una cosa que me apasiona debido a mis experiencias anteriores, el tipo de mezcla de diseño y desarrollo. Y creo que es algo que muchos desarrolladores realmente luchan con.

[00:10:40] Y creo que por las herramientas que tenemos, y creo que por las herramientas que tenemos. Figma. Hay un montón de oportunidades para los desarrolladores de tipo de conseguir sus pies mojados en el mundo del diseño sin tener que salir y, ya sabes, llegar a obtener un título de diseño o algo así. Absolutamente no es lo que espero, pero ser capaz de tener una comprensión básica de cómo se puede dibujar algo en el tablero de arte Figma y tipo de visualizar lo que estás haciendo antes de ir en realidad y la construcción de la misma, que puede ser muy poderoso porque se puede ver lo que realmente va a venir juntos como, y puede terminar ahorrando un montón de tiempo.

[00:11:10]Así que. Mi objetivo era llevar a alguien de esa aplicación Figma todo el camino a una aplicación de pila completa NextJS. Así que me imaginé lo que quería hacer y tratar de averiguar los pasos en el camino. Porque quería tratar de tocar muchas de las diferentes partes de ese proceso.

[00:11:26] Así que llevo a la gente a través de la construcción de un componente de libro de cuentos y la integración de que en una aplicación NextJS. Cómo probarlo con Applitools. .

[00:11:34] La empresa para la que trabajo, utilizamos acciones de Github para automatizar eso. Usamos Airtable para crear como una mini base de datos tipo de cosa. Y funciones sin servidor y NextJS.

[00:11:44] Para apoyar realmente eso 

[00:11:47] Matías: [00:11:47] Eso es un montón de cosas. Cada una de esas piezas puede ser un tutorial real, un artículo real o un montón de artículos o videos como, como Airtable, por ejemplo. qué es Airtable. Es un CMS o no. ¿Se puede utilizar que la base de datos o no? Es un poco en el medio y es increíble por cierto. Es realmente 

[00:12:07] útil. 

[00:12:09]NextJS. En sí mismo es una gran pieza de código que puede enseñar durante mucho tiempo. Así que, 

[00:12:17] Colby: [00:12:17] Por supuesto.

[00:12:18] Matias: [00:12:18] sí, algo realmente increíble. Una de las cosas que me encanta para el video es ese aspecto. El enfoque del diseño para los desarrolladores. Realmente me chifla el diseño. En realidad, todos, todos, todos los sitios que construí yo mismo se ven igual, pero con 

[00:12:35] diferentes colores, 

[00:12:37] Colby: [00:12:37] Bueno, te entiendo, ya sabes, normalmente creo mis proyectos a partir de la misma base. Así que si, si echas un vistazo a mis diferentes páginas de aterrizaje, todas tienen los mismos elementos, pero yo sólo añado algunos colores,

[00:12:49] y diferentes estilos en el camino. Pero ya sabes, la, creo que la parte más importante es simplemente ser capaz de enmarcar el contenido y la, la funcionalidad.

[00:12:56]Porque yo, . No soy súper creativo en términos de como crear diseños muy creativos. Al igual que yo, yo soy más como un diseñador funcional donde como yo se centran en tratar de hacer lo más útil posible. Derecho. Y creo que eso es, ese es el tipo de cosa que estoy tratando de ayudar a la gente a aprender a través de ese curso no es convertirse en un artista, pero la creación, la creación de un patrón de diseño funcional, diseño de la experiencia del usuario para que alguien pueda tener un tiempo más fácil trabajar a través de su aplicación.

[00:13:22] Matias: [00:13:22] Creo que hay una tonelada de valor en ese enfoque.Actualmente la web está explotando en creadores. Creando sus propias cosas, sus productos, su, su propia, cualquier cosa, y todo eso. Cualquier cosa necesita una página de aterrizaje necesita, copia, necesita algunas llamadas a la acción para tratar de atraer a los clientes o usuarios y el diseño funcional es lo que necesitan.

[00:13:48] No necesitan algo que vuele con el 3d. Como las cosas de la manzana como los sitios web de la manzana. 

[00:13:56] Colby: [00:13:56] Absolutamente. 

[00:13:56] Matías: [00:13:56] Sí. Así que me gustó mucho eso. Una cosa que copié de ti es en realidad una acción para recordar contenidos. Y cada vez que puedo, me acuerdo de la gente por eso. ¿Así que puedes repasar las acciones de GitHub? Sé que te encanta.

[00:14:12] Colby: [00:14:12] Me encanta. Sí. Me encanta 

[00:14:13] acciones de github. Así que creo que desde mi experiencia pasada, he tenido un montón de dolor con un CICD, que es la integración continua, los procesos de desarrollo continuo. Si alguien está familiarizado con cosas como Jenkins yo sólo, sí, tengo un montón de pesadillas acerca de que basado en el trabajo pasado que he tenido que hacer con él.

[00:14:28]Así que cuando las acciones github tipo de salió. Me enamoré muy rápidamente en el amor.

[00:14:32] con él porque hay un montón de cosas que, como un ingeniero de front-end, soy capaz de automatizar, y es un muy, tipo de una barrera de entrada baja donde está justo dentro del proyecto. Y viene con un montón de cosas fuera de la caja y una tonelada de documentación, que para mí, fue muy fácil de girar para arriba.

[00:14:51] Estas piezas de automatización, que tipo de hizo mi mente ir salvaje. Y la cosa de la que hablaste es el recordatorio de contenido donde parte de mi problema como creador de contenido es que simplemente me olvido de twittear acerca de mi contenido antiguo y que sólo tipo de se pierde en el abismo de la web, derecho. Y quería hacer algo al respecto.

[00:15:09] Así que me puse mi sombrero de desarrollador y creé una acción en Github. Puedo configurarlo para que se ejecute todos los días. En realidad, se ejecuta dos veces al día donde se va a sacar un elemento al azar de un feed RSS, que yo, que es dinámico basado en lo que mi blog actual tiene. Y me envía un correo electrónico que. Así que básicamente me da un recordatorio diciendo, Hey, aquí hay una pieza de contenido.

[00:15:30] ¿Por qué no lo twitteas o algo así? Realmente se puede poner eso para cualquier cosa porque la acción del centro de Github desencadena, como puede ser basado en un cron por lo que es basado en el tiempo por lo que lo que quieres hacer con él, cualquier cosa que es tipo de tiempo basado en que realmente puede configurar una secuencia de comandos para hacer lo que quieras.

[00:15:46] Matias: [00:15:46] Lo que realmente me gusta de lo que dijiste es que cuando dijiste que te pusiste el sombrero de desarrollador y es algo así como, somos desarrolladores frontales. Eso es una especie de etiqueta como el papel, pero en realidad somos desarrolladores en la palabra general. Hizo este video desde el diseño hasta el desarrollo es en realidad un montón de cosas.

[00:16:10] Colby: [00:16:10] Sí. 

[00:16:10] Matias: [00:16:10] Un montón de cosas que no es sólo la parte delantera en el desarrollo, que terminan escribiendo acciones GitHub que es la optimización DevOps. Las escribiste, viste algunas cosas para funciones de Netlify, funciones sin servidor que en realidad es una especie de cosa de backend. Así que el área de desarrollo frontal real es más amplio y Wilder.

[00:16:31] ¿Qué opina del estado actual del desarrollo de la ingeniería frontal? 

[00:16:36] Colby: [00:16:36] Sí, no, creo que es un punto realmente interesante. Porque mucha de la experiencia que he tenido en el pasado con las tareas relacionadas con el desarrollo de operaciones, porque ha sido como muy script, cosas pesadas dentro de AWS, como la formación de la nube y ese tipo de cosas. Y no disfruto de esas cosas en absoluto. Pero las herramientas como Netlify y como estas acciones de GitHub, creo que son realmente poderosas porque pueden no ser tan flexibles como la creación de su propia infraestructura en AWS donde algunas personas pueden necesitarlas.

[00:17:00]Trabajo muy específico para, ya sabes, las empresas más grandes y esas cosas. Pero para mis propósitos, estamos todo lo que quiero hacer es conseguir un sitio web estático a la web, enganchando que hasta Netlify o Verce llike, eso es una cosa hermosa. Literalmente no tengo que pensar en nada. Conecto como un repositorio a mi cuenta allí y sólo se despliega en la primera vez que me golpeó.

[00:17:19] Al igual que eso fue lo que realmente hizo clic con el mundo JAMstack donde el, el poder que tenía que ser capaz de hacer eso. Como, no sé. Si estás acostumbrado a tener que usar cosas como el FTP para subir un sitio web a la producción así, eso es una pesadilla y 

[00:17:33] Matías: [00:17:33] Es una estación a algún servicio en alguna parte. 

[00:17:37] Sí.

[00:17:38] Colby: [00:17:38] yup. Yup. Y estos nuevos servicios es, es sólo, hay tanto dolor.

[00:17:43] que me evita tener que preocuparme. Me gusta ser capaz de hacer estas cosas como el despliegue de un sitio web o configurar las automatizaciones, pero me gusta la parte de ingeniería frontal de la misma. Así que puedo pasar más tiempo en las partes que disfruto y que creo que mis puntos fuertes se encuentran en donde puedo construir mi aplicación, como yo quiero.

[00:18:02] Y sé que cuando lo sincronizo con Netlify o trato de automatizar algo con acciones de Github. No tengo que gastar mucho tiempo porque muchas de esas cosas son una especie de abstracción donde no tengo que ser muy detallista en las cosas de infraestructura.

[00:18:16] Matías: [00:18:16] Yo creo que todo esto viene de la historia antigua. Cuando node surgió y la gente empezó a usar JavaScript para todo y luego de alguna manera eso termina , en el estado actual donde usamos JavaScript para todo, pero de la manera más fácil posible con este JAMStack, que es el tema actual. 

[00:18:36] Que nos permiten crear. Centrarnos en el servicio que queremos crear o en el contenido que queremos compartir y no en todas las demás cosas. Recuerdo momentos, hace años, tal vez una década, en los que teníamos que entrar por SSH en el servidor para configurar nuestro entorno Linux para ejecutar PMT. ¿Mantienes el servicio de notas corriendo detrás o configuras el motor X de forma menor.

[00:19:01] Quiero decir, lo aprendí, todo eso, pero no quiero hacerlo bien. Más. 

[00:19:06] Así que, así que 

[00:19:07] Colby: [00:19:07] Y esa es una interesante 

[00:19:08] punto allí también, porque yo.

[00:19:10] mi buen ejemplo de eso es Webpack. Así que, por supuesto, ya no tenemos que pensar en Webpack junto a JS Gatsby, todas estas grandes herramientas. Sí. Aprendí mucho al poder trabajar en la construcción de mi propia configuración personalizada de Webpack.

[00:19:25] Estoy muy contento de no tener que hacerlo más, pero las cosas que he aprendido al tratar de juntarlas, como que tengo una mejor comprensión de cómo estas herramientas están trabajando realmente bajo el capó. Proporcionan escotillas de escape basadas en Webpack. Así que si quiero añadir funcionalidad adicional, puedo, porque tengo una mejor idea de lo que está pasando ahora.

[00:19:45] Creo que vamos a tener que preocuparnos cada vez menos de Webpack ahora que se está abstrayendo por completo, lo cual es, ya sabes, Webpack súper potente y súper impresionante, pero no quiero ocuparme de ello. Sí, es cierto. Como parte de eso, esa parte del proceso que no disfruto. 

[00:19:57]Matías: [00:19:57] Es una especie de Babel. 

[00:19:58] Colby: [00:19:58] bien.

[00:19:59]Matias: [00:19:59] como que todo el mundo usa Babel, pero nadie sabe que está usando Babel es como que está ahí y no sabes lo que es AST. No tienes que lidiar con un AST, pero está ahí 

[00:20:10] es simplemente, es increíble.

[00:20:12] Colby: [00:20:12] Recuerdo la primera vez que intenté configurar React en una aplicación de Rails. Y me pasé días intentando averiguar cómo configurarlo porque no era sencillo. Y luego, antes de eso, había grunt tratando de averiguar cómo construir una tubería con eso. 

[00:20:27] Es increíble lo lejos que 

[00:20:28] llegó. 

[00:20:29] Matías: [00:20:29] Sí, hay mucho cambio ahí. Webpack vino a, a cambiar todo y a cambiarnos la vida, pero luego. Sí, gracias. La gente construye cosas encima de webpack y es increíble, y una de las cosas que podemos hacer ahora es todo el resto de los temas que realmente te emocionan y te interesan, en la creación de contenido que es JAMStack.

[00:20:48] Como entonces ya mencionamos que creo que la gente debe saber, o al menos tener una sensación sobre lo que es JAMStack y de hecho escribiste un libro. ¿Así que puedes conducirnos a través del apasionante mundo de JAMstack desde el principio? Soy una persona de cinco años. No sé nada de JAMstack.

[00:21:07] ¿Y qué es?

[00:21:08] Colby: [00:21:08] Todavía tengo que publicar ese libro como copia física, así que ya no tengo ese asterisco. Sí. Pero sí, así que JAMstack en su núcleo. Es una especie de evolución. Así que sólo quiero adelantarme a eso, pero tradicionalmente, es el proceso de tomar un sitio web y compilarlo antes de que llegue al navegador.

[00:21:27] Así que. Antes de que llegue a la solicitud en el navegador y que una cadena de solicitud de modo que lo que está sirviendo al usuario es un proyecto web completamente estático renderizado. Así que tradicionalmente eso sucedería con herramientas como Gatsby, donde vas a compilar estáticamente todos tus archivos en la estática, HTM, macho, JavaScript, CSS, y realmente estás golpeando esos archivos directamente desde el almacenamiento.

[00:21:51] Más recientemente, la gente está discutiendo si, por ejemplo, si tienes un servidor, pero le pones una CDN delante...

[00:21:57] Sigue sirviendo estáticamente desde el CDN, porque eso es como JAMstack y no sé, no sé realmente. .

[00:22:03] Dejaré que los dioses de JAMstack discutan esas cosas.

[00:22:07] Pero sí. Yo, creo que desde mi perspectiva, me gusta centrarme en hacer un primer enfoque estático y utilizar funciones sin servidor para proporcionar cualquier API dinámica, como experiencias en la parte superior de la misma. Me gusta la tranquilidad de poder tener mi proyecto compilado estáticamente en algún lugar.

[00:22:22]Y realmente, no lo he hecho. Grandes proyectos web desde mi última empresa, pero fui capaz de lograr mucho con ser capaz de tomar ese enfoque y he estado disfrutando. Y eso es lo que he estado manteniendo, manteniendo.

[00:22:36] Matias: [00:22:36] Y me imaginé que hasta donde yo entiendo NextJS Es tu mermelada para tu JAMstack, ¿no? Así que arriba. ¿Qué tiene NextJS que, eh, cumple con todos tus requisitos? ¿Qué, cuáles son los 

[00:22:50] ¿trato?

[00:22:52] Colby: [00:22:52] Así que una cosa interesante sobre Next JS antes de que me meta demasiado en eso es que NextJS ha proporcionado una especie de dos capacidades. Tiene el. Tanto el aspecto de compilación estática que me gusta, pero también tiene la capacidad de renderizar en el lado del servidor. Y sólo quiero adelantarme a eso porque tienes esas opciones, pero normalmente cuando estoy construyendo aplicaciones NextJS, me gusta exportarlas estáticamente de nuevo.

[00:23:12] Porque yo, me gusta ir estático primero y me gusta tener esa tranquilidad. Pero creo que lo que más me gustó de NextJS es que siento que la API es como, en particular para cosas como la obtención de datos y la forma en que las páginas se componen, siento que es. Es una forma más intuitiva de crear una aplicación.

[00:23:30] Y realmente estoy disfrutando de ser capaz de crear un producto de esa manera. Y eso no debe ser un desprecio hacia cualquiera de los otros proyectos porque todos son increíblemente grandes herramientas. Hay muchas cosas increíbles que la comunidad está haciendo. Es solo que, siento que realmente disfruto trabajando con next JS como herramienta.

[00:23:44] Y siento que están haciendo cosas como. Derecho. Así que estoy muy emocionado de ver donde se mantienen. 

[00:23:49] Matias: [00:23:49] Bueno, bueno, las cosas que disfruto de este framework en particular a continuación es que mencionaste el dolor de configurar react desde cero y tomar todas las decisiones que tienes que hacer para definir qué herramienta vas a usar para, no sé, enrutamiento, fetching, lo que sea 

[00:24:09] ya está hecho.

[00:24:10] Y puedes ir con eso y todo, si tienes la exigencia, puedes escapar de la decisión del siguiente, entonces haz otra cosa 

[00:24:18] Colby: [00:24:18] Exactamente.

[00:24:19] Matías: [00:24:19] hablando de next. En realidad tienes un curso usando next para crear un eCommerce. 

[00:24:26] Colby: [00:24:26] Sí. 

[00:24:27] Sí. 

[00:24:27] Matias: [00:24:27] Y es que en realidad es un comercio electrónico SSG...

[00:24:32] Colby: [00:24:32] Sí. Así que mi curso, no puedo recordar si configuré específicamente la siguiente exportación, que lo exporta estáticamente como un sitio, pero todo lo que estoy haciendo allí es generado estáticamente. Así que usted puede desplegar que en Netlify. Usted puede desplegar que en Vercel que puede hacerse cargo de todo. Pero el punto de que es un generado estáticamente significa que es un poco más portátil.

[00:24:52]Pero lo que hago dentro de esa aplicación es traer todos los datos del producto en tiempo de compilación. Así que no hay solicitudes en el servidor o dentro del navegador para obtener esa información de esa manera. Cuando alguien añade un artículo a su carro, que son capaces de almacenar esa información dentro del navegador.

[00:25:10] En particular, usamos el almacenamiento local para asegurarnos de que ese estado persiste para el carrito de alguien, pero luego los empujamos a la caja de Stripe, que es definitivamente, bueno, no voy a decir definitivamente. Dudo que se genere estáticamente. Pero es un sitio completamente diferente del sitio que.

[00:25:26] Creamos dentro de la siguiente aplicación JS, los empujamos al sitio web de Stripe para completar los detalles de pago, incluyendo proporcionar un método de pago y todas esas cosas. Es una solución muy buena porque proporciona muchas de esas cosas fuera de la caja, que es uno de como parte de los grandes desafíos de la creación de sitios web de comercio electrónico.

[00:25:44] Hay tantos pequeños detalles en los que tienes que pensar para coger el dinero de alguien. Y es genial. Ese tipo de pago de Stripe es capaz de hacer eso realmente bien. Y. Relativamente fácil de integrar. 

[00:25:57] Matías: [00:25:57] Sí. Espero que Stripe escuche esto y empiece a montar un servicio en Chile. Pero la pregunta es si su curso crea archivos generados por el sitio estático SSG.

[00:26:11] Cómo se manejan los nuevos datos, como los nuevos productos en el, en el sitio, cómo se  

[00:26:18] lo resuelves.

[00:26:19] Colby: [00:26:19] Claro. Así que la forma en que. Yo, no recuerdo si lo configuré dentro del curso, pero la forma en que tradicionalmente lo harías es cada vez que el contenido fuente cambia. Así que normalmente se gestiona el contenido dentro de un CMS, ¿verdad? Así que vamos a utilizar WordPress como un ejemplo. Así que si usted está usando WordPress como su CMS, usted maneja esos proyectos allí.

[00:26:41] Y entonces lo que sucede es que WordPress tiene un sistema de gancho. Así lo hace Netlify o Vercel, o realmente cualquiera de estos proveedores de alojamiento que.

[00:26:49] puedes activar un nuevo despliegue. Así que tan pronto como los cambios de contenido, es básicamente como decir WordPress va a salir y decir, Hey, ahora si me aseguro de construir una nueva instancia de este proyecto y va a tirar en todos los datos más recientes y asegurarse de que el proyecto se despliega realmente con el último estado ahora, alternativamente por lo que es como el flujo estático, ¿verdad?

[00:27:07]Pero también se puede. Si usted está manejando que los datos del producto a nivel local, como un archivo JSON en ese punto, usted todavía está manejando y obtener, y si usted está empujando que a algo como Netlify, es automáticamente va a desplegar de todos modos. Así que en el momento de la compilación, siempre va a tirar en esa última versión. 

[00:27:21]Eso significa que no va a ser como a los segundos precisa y actualizada a la CMS. Pero es un intercambio, ¿verdad? Es, alternativamente, usted puede hacer algo del lado del servidor, pero usted está haciendo que el comercio. Proporcionar ese sitio estáticamente, que va a obtener una gran cantidad de beneficios en comparación con el lado del servidor, que podría actualizar un poco más rápido, pero entonces usted va a tener algunos más riesgos con cosas como la escala de los servidores y esas cosas.

[00:27:44] Así que es una especie de riesgo tiene que equilibrar lo que, lo que va a trabajar mejor para su caso de uso? Yo, me gusta decir que la primera ideología estática es como. Fácilmente, no fácilmente. Usted es capaz de hacer ese tipo de trabajo y un montón de casos de uso, pero es definitivamente algo que usted necesita para tipo de peso en su proyecto en particular. 

[00:28:03] Matias: [00:28:03] Bueno para el comercio electrónico, he visto tantos errores de precios que la gente acaba de comprar computadoras como por un centavo que tal vez el flujo de la estática va a salvar eso, que los comentarios de esos errores, porque usted tiene tiempo, derecho. Usted puede revisar primero antes de desplegar. Así que todo eso es bueno. Bien. Para un chico que tipo de situaciones, los errores que son de cara al usuario, usted puede confiar no sólo en su código, no sólo en su contenido, pero también se basará en sus pruebas.

[00:28:38] Y eso nos lleva a otro tema en el que estáis trabajando mucho porque Applitools, vale. Eso es la prueba. Así que, pero sólo para enmarcar las cosas un poco. En Applitools estás trabajando y estás enseñando y creando contenido y educación sobre el testing por el lado visual de las cosas. Entonces, ¿qué es la prueba visual

[00:29:01] Colby: [00:29:01] Sí, creo que o bien tienes, como he oído, ambas formas, pruebas visuales, pruebas de regresión visuales, pero básicamente lo que hace es que va a tomar una captura de pantalla de su aplicación. Entonces va a comparar las futuras capturas de pantalla con esa captura de pantalla existente. Así que esa primera captura de pantalla va a ser su base.

[00:29:20] Y a medida que apruebe nuevas iteraciones de eso, va a actualizar esa línea de base. Así que lo que realmente está haciendo es asegurarse de que cada vez que se ejecuta esa nueva prueba, que esa captura de pantalla va a coincidir con la captura de pantalla anterior. Ahora, como se puede imaginar una gran parte del tiempo, una gran cantidad de las empresas que hacen píxeles.

[00:29:36] O quienes hacen pruebas visuales hacen lo que se llama pixel por pixel. Así que eso significa que si incluso el leve tiene un poco de diferencia de que la imagen es diferente. Lo que significa que si su contenido se desplaza por un píxel, usted va a ser marcado por toda esa cosa. Pero lo bueno de Applitools. Sé que sueno un poco vendedor aquí, pero es, es la IA impulsada donde lo que va a hacer es que inteligentemente va a mirar a esa imagen y va a ser capaz de ver que ese cambio fue porque tal vez el navegador representado un píxel diferente.

[00:30:05] Así que puede ver que ese contenido todavía está donde debería estar. Y en realidad está trabajando como se esperaba que usted puede centrarse en los resultados reales significativos y no obtener falsos positivos cuando usted está tratando de. La prueba de su sitio. Lo bueno también es que no sólo se ve inteligente desde esa perspectiva, pero también si usted tiene un blog, por ejemplo, usted va a tener contenido dinámico, ¿verdad?

[00:30:28] Cada vez que usted empuja hacia fuera una entrada de blog, que va a cambiar fundamentalmente esa página. Así que lo que puedes hacer con Applitools es configurar. como esas regiones en su aplicación para ser basado en el contenido donde va a ver que es el texto y es la base de contenido. Y no va a marcar esos como errores, a menos que algo cambia alrededor de lo que el diseño real del proyecto.

[00:30:51] Así que no va a marcar de nuevo, los falsos positivos porque usted publicó una nueva entrada del blog, pero se marcará si algo se rompe en eso.

[00:30:59] UI. 

[00:31:00] Matias: [00:31:00] Definitivamente deberíamos compartir una especie de demo o video de previsualización en las notas del programa porque realmente es, parece una herramienta increíble. No he podido usarla, pero he visto la demo 

[00:31:13] Y

[00:31:13] es increíble.

[00:31:15] Colby: [00:31:15] Y espero haberlo explicado. Sí, claro. Porque siento que lo he explicado más complicado de lo que es, 

[00:31:19] Matias: [00:31:19] No sé es, para mí, suena bien. Así que podemos, podemos trabajar con eso. Y, pero una pregunta sobre las pruebas que creo que es realmente habitual y, y viene a todos los lugares que. Casi nadie está realmente siendo honesto, haciendo pruebas, no todo el mundo realmente tiene pruebas. Tal vez en el backend la gente tiende a tener más como el 90% de la cobertura en las pruebas porque es una especie de, no sé si es más fácil, pero, pero están acostumbrados a hacerlo.

[00:31:51] Vamos a mantenerlo así. Pero en el frontend la gente tiende a no hacerlo y esta cosa visual es en realidad otra capa de complejidad para sus pruebas. Así que aunque es una herramienta increíble, ¿por qué crees que la gente no lo hace? Tenemos una herramienta muy buena como Cypres. Me gustó mucho Cypres, pero no tenemos el lujo de tiempo.

[00:32:18] Es 

[00:32:18] que... 

[00:32:20] Colby: [00:32:20] Sí. Y creo que es un punto interesante porque creo que parte de la cuestión es que tradicionalmente, como no hemos tenido. Muchas de estas grandes herramientas. Al igual que si usted piensa en un ciprés es todavía relativamente nuevo, ¿verdad? Como es, es algo que me siento como culturalmente, todavía estamos tipo de arraigada que el extremo delantero no tiene prueba significativa.

[00:32:40]Pero ahora que tenemos algunas de estas herramientas más potentes que los ingenieros de front-end pueden utilizar, como JavaScript es algo que está más cerca de los desarrolladores para ser capaz de implementar ellos mismos. Creo que también. Es, puede ser más divertido para hacer el desarrollo de características, como la honestidad, y creo que la gente gravitan a querer hacer eso, pero hay una gran importancia en la prestación de esas pruebas, porque especialmente si usted está trabajando en como un producto del cliente o algo así, como si usted está, si usted está gastando más, usted podría terminar gastando más tiempo de trabajo, la fijación de los errores si usted no está proporcionando esas pruebas.

[00:33:09]Creo que lo interesante con Applitools sin embargo, es que me siento como si fuera en realidad un menor es mientras que podría ser más avanzado técnicamente en términos de lo que está haciendo en términos de desarrollador. Al igual que es en realidad un poco más fácil porque lo que estás haciendo es imaginar si usted está escribiendo una prueba de Cypress donde usted va a un sitio web y haga clic en un botón y asegurarse de que se registró en, derecho.

[00:33:33] Básicamente estás haciendo exactamente lo mismo, pero en cada paso del camino. Puedes tomar una instantánea con Applitools, que hará una captura de pantalla. Pero lo que estás haciendo es que estás verificando que la funcionalidad está trabajando como se esperaba en cada paso del camino. Te aseguras de que tu página de inicio está funcionando. Su página de inicio de sesión está trabajando.

[00:33:49] Usted está asegurando que su tablero de instrumentos se carga correctamente cuando se inicia la sesión con éxito y tiene una muy amplia, el nivel de las pruebas a través de toda su aplicación con que una instantánea. Mientras que antes tendrías que configurar un montón de pruebas integradas para ver todos los pequeños detalles de la página para asegurarte de que se está cargando correctamente, donde estás obteniendo un montón de resultados de esos, de esas simples instantáneas. 

[00:34:13] Matías: [00:34:13] Sí, me gusta mucho. Y creo que tienes razón en esta idea de que tal vez las herramientas que tenemos para las pruebas ahora, es todavía nuevo y la comunidad en general no es consciente de ello o se utiliza para usarlo. Y todavía en las edades de JS Dom y, y ese tipo de cosas, que era básicamente un raspador alrededor de su web y tipo de 

[00:34:36] realmente difícil de escribir.

[00:34:38] Así que 

[00:34:39] Colby: [00:34:39] sí.

[00:34:39] Una anécdota interesante. La anterior empresa con la que trabajé en nuestro proyecto, había integrado Cypress y he establecido algunas pruebas básicas donde. Como yo no diría que es un conjunto completo de pruebas para probar la aplicación, pero era cosas básicas para asegurarse de que la funcionalidad amplia que estaba trabajando.

[00:34:56] Pero lo que queríamos hacer es contratar a un ingeniero de control de calidad para que viniera y continuara donde yo lo dejé y terminara de escribir un montón de pruebas de integración para probar nuestro flujo. Pero lo que notamos es que al menos en el área que estábamos contratando, en el área metropolitana de Washington DC es. Muchos de los ingenieros de control de calidad que estaban aplicando para esa posición, ni siquiera sabía lo que era Cypress, que era interesante.

[00:35:19] Muchos de ellos todavía se basan en las plataformas de pruebas basadas en la interfaz de usuario y no, no para arrojar sombra sobre un nombre o algo así, pero muchos de ellos utilizan Selenium, que es completamente válido enfoque para las pruebas que usted sabe que acabamos de tener que, que, cara a cara donde me enfrenté con Angie y, ya sabes, Cypress y selenio vino lado.

[00:35:36] Pero el punto era que Cypress es todavía lo suficientemente nuevo como para que no haya Se ha puesto de moda en el mercado. Y todavía es una herramienta relativamente nueva que la gente todavía está tratando de aprender y obtener una cuota de mercado para. 

[00:35:49] Matias: [00:35:49] Bueno en mi opinión, yo sé lo de Cypress. Desde, no sé años, ni siquiera sé cuándo, pero, pero es más fácil. Y a, creo que es aún más fácil vender el uso de Cypress a su equipo porque es fácil de escribir la prueba. Así que es una especie de buena compensación. Como vamos a hacer esto, vamos a evitar otra, la otra cosa de pruebas.

[00:36:16] Y al menos tenemos integraciones así que  

[00:36:18] Colby: [00:36:18] Estoy de acuerdo. Y especialmente porque está basado en JavaScript, ¿verdad? Así que es una sintaxis que si estás trabajando en un proyecto basado en JavaScript, tu equipo ya debería conocer. Sólo necesitan conocer los diferentes comandos para trabajar con ella.

[00:36:30] Y en ese punto es una especie de jQuery basado, que es. también arraigada en nuestras culturas.

[00:36:34] Así que es, ya sabes, debería ser fácil utilizar esos métodos y trabajar con ellos.

[00:36:39] Matias: [00:36:39] Es como decirle al navegador que haga lo que en realidad tiene que hacer clic aquí. Desplázate hasta allí. Encuentra esto. Texto. Así que 

[00:36:48] es más o menos lo mismo.

[00:36:50] Colby: [00:36:50] Y acaba siendo más significativo porque no sólo estás probando el código, sino que estás probando cómo funciona realmente dentro del navegador, lo cual, ya sabes, haciendo mocks y montando virtualmente dentro de un servidor puede que sólo te dé mucha información de cómo funciona.

[00:37:05] en realidad rinde en el navegador .. 

[00:37:09] Matias: [00:37:09] testing, ya sabes que si quieres aprender más sobre testing, hay mucho contenido por ahí y, y Applitools es una buena herramienta. Y si no usas Applitools es cosa tuya, pero nosotros lo recomendamos. 

[00:37:21] Colby: [00:37:21] Regístrate en una cuenta gratuita y hazme saber si 

[00:37:23] necesito ayuda. 

[00:37:24] Matias: [00:37:24] Sí, Colby es tu hombre. Y Cypress Cypress.io no es patrocinador en este show y cómo, pero si quieres, siempre puedes y visitar que hay una buena documentación, y hay un montón de buenos videos allí.

[00:37:36] Colby. Estamos casi al final de este episodio, y quiero dejar que recomiendes algo, lo que quieras a la audiencia, algo que acaba de llegar de Colby 

[00:37:49] mismo.

[00:37:50] Colby: [00:37:50] Entonces, ¿es esto, es esto más como una selección no técnica o es una selección técnica 

[00:37:54] o 

[00:37:55] Matias: [00:37:55] Lo que quieras y 

[00:37:56] solo haz tu selección 

[00:37:58] Colby: [00:37:58] bueno, sólo porque estábamos en el tema de las pruebas, supongo. Así que estamos haciendo esta prueba frontal Fest. Es una conferencia, es una conferencia gratuita. En realidad, Applitools y Cypress la copatrocinan. Si usted va a frontendtestfest.com, es el martes, 8 de junio, y en realidad voy a hablar allí.

[00:38:12] Así que si quieres aprender más sobre las pruebas con la parte delantera, hay un montón de cosas interesantes. Kent Dodds también está hablando allí y Angie dará una charla.. 

[00:38:20] Matias: [00:38:20] ¿Será un video? 

[00:38:21] Grabaciones de eso, porque este, este episodio donde íbamos 

[00:38:25] después.

[00:38:25] Colby: [00:38:25] oh, bueno, sí. Tengo que imaginar que también se grabará. Así que, 

[00:38:30]Sí, absolutamente. 

[00:38:32] Matías: [00:38:32] Sí. Y es el momento de enchufar alguna de tus cantidades masivas de contenido, coge algo y enchufa el programa 

[00:38:41]Para el público 

[00:38:42] Colby: [00:38:42] así que ya hemos hablado del diseño al desarrollo, por lo que se puede obtener de designto.dev, pero también voy a decir que mi próximo arranque JS WordPress. Y es, es realmente interesante para mí porque he estado disfrutando de tipo de tomar el mundo de WordPress y tratar de llevarlo a la JAMStack-ie próximo mundo JS. Y hay un montón de desafíos detrás de eso..

[00:38:59] Pero ha sido un, ha sido un proyecto divertido para trabajar. Y lo que eres capaz de hacer es que eres capaz de tomar una instancia de WordPress por defecto. Todo lo que necesitas hacer es instalar WP graph, QL, y puedes crear instantáneamente un nuevo sitio JS siguiente conectándolo como un entorno. Variable es es bastante grande. Compruébalo en mi github.com/colbyfacyock/ next-wordPress-starter. 

[00:39:20] Matías: [00:39:20] Sí, gracias. Es un 

[00:39:22] nombre rápido y fácil. Así que 

[00:39:24] Colby: [00:39:24] Sí. 

[00:39:24] Matias: [00:39:24] eres mejor que la nomenclatura que yo así que el enlace estará en las notas del programa y para terminar esto Colby, ¿algo que quieras decir a la audiencia? Pensamientos finales, como palabras grandilocuentes   

[00:39:38] Colby: [00:39:38] Claro. Así que supongo que podemos dar vueltas a las cosas de nuevo al frente. Mientras estás aprendiendo, ya sabes, intenta, creo que la mejor manera de aprender es haciéndolo. Y mientras lo haces, intenta también cuestionar las cosas que están sucediendo. Así que mientras ves un tutorial, trata de entender por qué usaron un operador particular en JavaScript o por qué hicieron algo de una manera particular.

[00:39:58] Eso te va a ayudar. No sólo aprender a hacer las cosas como usted está viendo ese tutorial, pero también va a ayudar a aprender los fundamentos para ayudar a crecer como desarrollador. 

[00:40:09] Matías: [00:40:09] Completamente de acuerdo. Bueno, estamos terminando este episodio, muchas gracias por venir aquí. Colby sigue a Colby en Twitter, y todos los demás enlaces estarán en las notas del programa. 

[00:40:20] Colby: [00:40:20] Muchas gracias Matias 

[00:40:21] Matias: [00:40:21] Nos escuchamos en la próxima semana o en la semana? Que, ya sabes, soy un hablante de español . 

[00:40:30] Colby: [00:40:30] ciao.




English
Matias:
[00:00:00] Welcome to this new episode of Cafe con Tech in this special season in English today with me is the Astro coder itself. Colby Fayock is coming from the space with us. Welcome Colby to the show.

[00:00:14] And thank you for being here.

[00:00:16] Colby: [00:00:16] Hey Matias. Thank you so much for having me. 

[00:00:18] is a pleasure to be here. 

[00:00:20] Matias: [00:00:20] I'm really excited to have you here. I was brave enough and fail to face you on, on your challenge. So yeah, in case you don't know, Colby have a challenge on Twitch that he challenged developers to face some  impossible feature In an hour and yeah, it's been, it's amazing. And I think the only one that fails was me.

[00:00:44] So 

[00:00:44] Colby: [00:00:44] no, 

[00:00:45] Matias: [00:00:45] yeah. Thank you to my computer. That was stuck into different things, but it's an amazing show. You should go ahead and take a look. And in case you don't know who called the is Colby, can you do a quick bio introduction of 

[00:01:00] yourself?

[00:01:01] Colby: [00:01:01] I would love to, so yeah, I'm Colby Fayock. I'm a developer advocate over at applitools. Before that I've been a UX designer and front end engineer for a while. And I just, I love all things web. I love being able to. And build experiences for the web. And JAMstack has been kind of like my thing lately.

[00:01:19] I really enjoy working with NextJS. . So I do a lot of content creation, educational content creation, where I create like tutorials and video tutorials on YouTube. And also I'm an egghead instructor right along with you Matias and  it's a lot of fun. I, I, I enjoy being able to help other people learn how to code and Yeah, that's, that's where I, what led me into the role of becoming a developer advocate.

[00:01:41] Matias: [00:01:41] Yeah, that's, that's kind of a, I don't know the common topic around these show that most of the guests are so hard around content creation, developer relations or education material. But in the previous episode we had Kent, we had Kevin we had Sam so everyone is doing there own work on different places.

[00:02:03]Teaching others, helping others to level  up their careers in your case, do you have a bunch of things you're kind of a content creation machine and , if you want to try to follow up with that join  to Colby's newsletter where you can kindly remind us that you are doing a lot of things that it's actually hard to keep up 

[00:02:26] with at one of the things that you are you're doing.

[00:02:29] And I really love it. It's the, the jelly drops these little short videos that you're doing in YouTube about JavaScript fundamentals, kind of the basic of JavaScript. Can you, can you tell us about why you're starting with that and what is goal?

[00:02:43] Colby: [00:02:43] Yeah. Sure. So traditionally a lot of my content revolves around creating a project where like I have an end goal, whether it's some kind of application like the one I was just working on today was adding authentication to an app. But one thing I don't really, I didn't really focus on where the fundamentals of JavaScript, particularly like different things like operators, where the last one that I put out was with, async/await where that's, where you can create a promise inside of JavaScript and create asynchronous functions.

[00:03:11]And its. I think people are kind of drawn to the way that I create content, because I'm very direct. And to the point where some people kind of add like the fluff and I'm not saying, you know, people have different ways of presenting the content and the educational 

[00:03:24] Matias: [00:03:24] We're not judging anyone. 

[00:03:26] Colby: [00:03:26] Yeah, exactly, exactly.

[00:03:27] But I just, I just like to get in, try to teach the concepts and how I feel somebody can learn. And I wanted to apply that to the fundamental aspects of it, where if somebody is watching one of my videos, but they don't know how async/await works. Maybe they can hop over to this fundamental jelly drop where they can get a quick insight into how it is.

[00:03:45] So I walk through exactly like what it is. I work through just really simple, like implementation script. Show an idea of what it looks like. And people have said it's been helping, so I want to keep doing them. I think they're fun. And it's just another way to kind of explore a different, a little bit of a different format from what I typically do. 

[00:04:05] Matias: [00:04:05] Yeah. I like that, is kind of a, all around content that you create something big like this I dunno, setting up our NextJS thingy and you code,   you just code that and, but there are little things that are going into the cracks and people can go to the jelly drop and find out what was that.

[00:04:27] Do you think that this kind of a trend here that you have these you and others have this really dense material, like the projects, but there is a lot of people that is currently transitioning into development and the fundamentals and the easiest path, the simple things that the first thing that you need to learn are kind of 

[00:04:47] lagging at some point?. 

[00:04:49] Colby: [00:04:49] Yeah, no, I think that's an interesting thing because I think what draws people to development and it was definitely in my case as well, is being able to build something exciting where I always like to reference the first thing that kinda got me into development was creating MySpace profiles and Counterstrike team, a website.

[00:05:10] And bands and stuff. And like, it was really out of self-interest that I was learning how to do these things because I was excited about it. And it was motivated to keep learning and how to do it. And that's kind of where I try to apply, even when I'm doing something, if I'm trying to learn something, I want to try to apply it to something.

[00:05:26] Kind of real world where I can understand kind of working through that. So I, I totally get the idea where people want to find these interesting things to be able to work through a new technology to learn it that way. I personally think learning by doing is it's kind of like my mantra where, like, I think that's a really, a really powerful way to learn something is by actually doing something.

[00:05:46]So that's why I tried to apply that to what I'm learning, but  there's also a lot to be said about the fundamentals. I know, like some of the stuff that I've talked about in the past is things like SEO and accessibility, where somebody might completely, over-engineer a react component, for instance, where you can get a lot of that stuff out of the box.

[00:06:05] And the, the kind of ironic thing is when you. Over engineered. Some of that stuff, you lose a lot of the SEO and accessibility features that you might've gotten for free with the browser tools. And it would have saved you a ton of time. And of course, that's, you know, that's not every single use case, but I think it's just an example that illustrates why the fundamentals can be important. 

[00:06:23] Matias: [00:06:23] Yeah. What what I think about fundamentals is sometimes are overlooked by beginners really the seniors guys that I kind of tend to care a lot about that because in my opinion, I seen a lot of codebases at some point it's kind of people is just writing things, but there is a few little details that is just JavaScript.

[00:06:47]So I really like, and you have actually, you have a talk about that. Like put down 

[00:06:52] the JavaScript. Yeah. 

[00:06:54] Colby: [00:06:54] And it's on, it's on egghead. You  can watch it as a recorded it's recorded on egghead I mean, it's Put Down the JavaScript Level Up With The Fundamentals of Web D evelopment. And I talked through some examples, kind of a basic overview of the fundamentals of the web, but why they're actually important.

[00:07:10] So if, if it?

[00:07:11] does sound interesting, I definitely check it out. I, I, I think It's probably one of my more favorite talks that I've given, just because I think it has a lot of powerful stuff in there. But, yeah, it's definitely it's it's available on egghead.io talks.

[00:07:23] Matias: [00:07:23] It's fun. I mean, I don't want to plug something, but  actually I'm doing it. Well, I was writing a kind of micro course for the newsletter, in Spanish. I think I will translate it about modern JavaScript or Javascript for react or Javascript anything. I can'tdecide the name. And I learned so much by just writing and going through the documentation about, I don't know, a rest, spread operators and nullish coalescing and all of that.

[00:07:52] And it's kind of, wow, there's a lot more here than just using it. So check that talk, check the jelly drops because you will learn something, even if you are experienced developer anyways, 

[00:08:05] Colby: [00:08:05] and just another quick comment back on that stuff. I think a lot of people also miss that, like when you go through other people's tutorials, you might think like, how do these experienced developers know all these things already? And I think one of the things is they're, they're not, not teaching those fundamentals because they're kind of.

[00:08:20] Overlooking those things cause they're kind of fundamental knowledge for them. So if you see something like that in a tutorial, try to identify that and.

[00:08:27] try to look up what it is and you can learn those fundamentals as you're working through that more interesting projects. 

[00:08:33] Matias: [00:08:33] Yeah. Also our language of choice, Javascript, or TypeScript. If you are more, you care a little more, 

[00:08:41]It's an ever, I mean, after you've tried out with TypeScript and works good, you can't go back to plain JavaScript. Yeah. 

[00:08:52] Colby: [00:08:52] Yeah. 

[00:08:52] Matias: [00:08:52] Weird. But if you, if you like JavaScript, you know, that it's an ever-changing language that changed too much, in my opinion, for good, because it's actually adding good things to it, but too much, the recent version  exactly is that it's actually, I think it's 12.

[00:09:14] The number of the ECMAScript thing for this year. Comes with a bunch of , new operators and things. So if you want to use off all of the powers, I need to understand where that comes from. The pain that, that the pain, the community suffered  to create that new thing. 

[00:09:31] Colby: [00:09:31] Absolutely. 

[00:09:32] Matias: [00:09:32] And other things that you, you mentioned, you already mentioned this, you used to create kind of big things, like big courses, big videos.

[00:09:41] And one of the big things is this from design to the development course, that crash course that you create on Youtube. That is crash, but it's still three hours and a half, but it's a ton of things in there. So how that comes to be and what people can 

[00:10:00] find in that video. 

[00:10:02] Colby: [00:10:02] sure. So it's funny that you mentioned about the crash course aspect, because I really use the word crash course because I saw other YouTubers using that term and I didn't know what to say. So that's why I went with that. But yeah, so it, it started off by. People were kind of requesting that I did a long form piece of content instead of like, my tutorials are typically somewhere between like five and 15 minutes.

[00:10:24]So people wanted to see. What it would look like if I built out a tutorial where I actually fleshed out entire project one thing that I'm passionate about because of my past experiences, the kind of mixing of design and development. And I think it's something that a lot of developers actually struggle with.

[00:10:40] And I think because of the tools that we have, and I think because of the tools that we have. Figma. There's a lot of opportunity for those developers to kind of get their feet wet in the design world without having to go out and, you know, get to get a design degree or something like that. Absolutely not what I expect, but being able to just have a basic understanding of how you can draw something on the Figma art board and kind of visualize what you're doing before you actually go in and building it, which can be very powerful because you can see what it's going to actually come together as, and it can end up saving a lot of time.

[00:11:10]So. My goal was to kind of take somebody from that Figma application all the way to a full stack app NextJS application. So I kind of figured out what I wanted to do and try to figure out the steps along the way. Cause I wanted to try to touch on a lot of the different parts of that process.

[00:11:26] So I take people through building a storybook component and integrating that into an NextJS application. How to test that with Applitools. .

[00:11:34] The company that I work for, we use Github actions to automate that. We use Airtable to create like a mini database kind of thing. And serverless functions and NextJS.

[00:11:44] To actually support That 

[00:11:47] Matias: [00:11:47] That is a ton of things. Each of those pieces can be an actual tutorial, an actual article or a bunch of articles or videos like, like Airtable, for example. what Is Airtable. It's a CMS or not. Can you use it that database or not? It's kind of in the middle and it's amazing by the way. It's really 

[00:12:07] useful. 

[00:12:09]NextJS. In itself is a big piece of code that you can teach for a long time. So, 

[00:12:17] Colby: [00:12:17] For sure.

[00:12:18] Matias: [00:12:18] yeah, really amazing thing. One of the things that I love it for the video is that aspect. Design focus for developers. I really sucks on design. I actually, every, every, every site I built by myself looks the same, but with 

[00:12:35] different colors, 

[00:12:37] Colby: [00:12:37] Well, I feel you there it's, you know, I, I usually create my projects off of the same starter. So if you, if you kind of take a close look at my different landing pages, they all have the same elements, but I just kind of add some colors,

[00:12:49] and different styles along the way. But you know, the, I think the more important part is just being able to frame the content and the, the functionality.

[00:12:56]Cause I, . I'm not Super creative in terms of like creating like very creative designs. Like I, I'm more of like a functional designer where like I focus on trying to make it as usable as possible. Right. And I think that's, that's the kind of thing that I'm trying to help people learn through that course is not becoming an artist, but creating, creating a functional design pattern, user experience design so that somebody can have an easier time working through your app.

[00:13:22] Matias: [00:13:22] I think there is a ton of value on that focus.currently the web is exploding on creators. Creating their own stuff, their products, their, their own, anything, and all of that. Anything needs a landing page needs need, copy, need some call to actions to try to attract clients or users and functional design is what they need.

[00:13:48] They don't need something that fly over with 3d. Like apple things like apple websites. 

[00:13:56] Colby: [00:13:56] Absolutely. 

[00:13:56] Matias: [00:13:56] Yeah. So I really liked that. One thing that I copied from you is actually an action for content reminder. And every time I can, I remember people about that. So can you go through GitHub actions? I know you love.

[00:14:12] Colby: [00:14:12] I love. Yes. I love 

[00:14:13] github actions. So I think from my past experience, I've had a lot of pain with a CICD, which is continuous integration, continuous development processes. If anybody's familiar with things like Jenkins I just, yeah, I have a lot of nightmares about that based off of the past work that I've had to do with it.

[00:14:28]So when github actions kind of came out. I fell really quickly in love.

[00:14:32] with it because there's a lot of things that as a front end engineer, I'm able to automate, and it's a very, kind of a low barrier of entry where it's right inside of the project. And it comes with a lot of things right out of the box and a ton of documentation, which for me, it was really easy to spin up.

[00:14:51] These automation pieces, which kind of made my mind go wild. And the one thing that you spoke of is the content reminder where part of my issue as a content creator is I simply forget to tweet about my old content and that just kind of gets lost in the abyss of the web, right. Where I wanted to do something about it.

[00:15:09] So I put on my developer hat and I created a github action. I can set it up so that it runs every day. It actually runs twice a day where it's going to pull off a random item off of an RSS feed, which I, which is dynamic based off of What my current blog has. And it emails me that. So it's basically just giving me a reminder saying, Hey, here's a piece of content.

[00:15:30] Why don't you tweet it out or something? You can really put that for anything because the Github hub action triggers, like it can be based off of a cron so that's time-based so whatever you want to do with it, anything that's kind of time-based you can really set up a script to do whatever you want.

[00:15:46] Matias: [00:15:46] What I really like about what you said is that when you said that you put your developer hat and it's kind of, we are front-end developers. That is kind of the tag like the role, but we are actually developers  in general word. Did this video from design to development is actually a lot of things.

[00:16:10] Colby: [00:16:10] Yeah. 

[00:16:10] Matias: [00:16:10] Lots lots of things that it's not only front on development, you end up writing GitHub actions that is optimization DevOps. You wrote them, seen some things for Netlify functions, serverless functions that it's actually kind of backend thing. So actual front end development area is wider and Wilder.

[00:16:31] How do you feel about the current state of front-end engineering development? 

[00:16:36] Colby: [00:16:36] Yeah, no, I think that's a really interesting point. Because a lot of the the past experience I've had with dev ops related tasks, cause it been like very script, heavy stuff inside of AWS, like cloud formation and that kind of stuff. And I don't enjoy that stuff at all. But the tools like Netlify and like these GitHub actions, I think they're really powerful because they might not be as flexible as creating your own infrastructure on AWS where some people might need them.

[00:17:00]Very specific work for, you know, bigger companies and stuff. But for my purposes, we're all I want to do is get a static website out to the web, hooking that up to Netlify o Verce llike, that's a beautiful thing. I literally don't have to think about anything. I connect like a repository to my account there and it just deploys at the first time that that hit me.

[00:17:19] Like that was what really made it click with the JAMstack world where like the, the power that I had to be able to do that. Like, I don't know. If you're used to having to use things like FTP in order to upload a website to the to the production like that, that's a nightmare and 

[00:17:33] Matias: [00:17:33] It's a station to some service somewhere. 

[00:17:37] Yeah.

[00:17:38] Colby: [00:17:38] yup. Yup. And these new services it's, it's just, there's so much Pain.

[00:17:43] that it prevents me from having to worry about. I like to be able to do these things like deploy a website or set up automations, but I enjoy the front end engineering part of it. So I can spend more time in the parts that I enjoy and that I think that my strengths lie in where I can build my application, however I want.

[00:18:02] And I know that when I sync it up to Netlify or try to automate something with Github actions. I don't have to spend a lot of time because a lot of that stuff is kind of abstracted away where I don't have to be very detail oriented on the infrastructure stuff.

[00:18:16] Matias: [00:18:16] I think that all of this comes from ancient history. When node came into life and people started using JavaScript for everything and then somehow that ends , in the current state where we use JavaScript for everything, but in the easiest way possible with this JAMStack, that is the current topic. 

[00:18:36] That enable us to create. To focus on the service that we want to create or the content we want to share and not on all the other things. I recall times, years ago, maybe a decade ago that we had to SSH into the server to set up our Linux environment to run PMT. Do you keep the note service running behind or set up engine X minorly.

[00:19:01] I mean, I learned it, all of that, but I don't want to do it okay. Anymore. 

[00:19:06] So, So 

[00:19:07] Colby: [00:19:07] And that's an interesting 

[00:19:08] point there too, because I.

[00:19:10] my good example of that is Webpack. So like of course we don't have to think about Webpack anymore next JS Gatsby, all these great tools. Yeah. I did learn a lot by being able to work through building my own custom Webpack configuration.

[00:19:25] I am so happy that I don't have to do it anymore, but the things that I learned by trying to piece those together, like I have a better understanding of how these tools are actually working under the hood. They provide Webpack based escape hatches. So if I wanted to add additional functionality, I can, because I have a better idea of what's going on now.

[00:19:45] I think that we're going to have to worry less and less about Webpack now that that's fully being abstracted away, which is, you know, Webpack super powerful and super awesome, but I just don't want to deal with it. Right. As part of that, that part of the process that I don't enjoy. 

[00:19:57]Matias: [00:19:57] It's kind of Babel. 

[00:19:58] Colby: [00:19:58] good.

[00:19:59]Matias: [00:19:59] kind of an everyone use Babel, but no one knows that are using Babel is kind of just there and you don't know what is AST. You don't have to deal with an AST, but it's there 

[00:20:10] it's just, it's amazing.

[00:20:12] Colby: [00:20:12] I remember the first time trying to set up React on it was a particularly a rails application. And I, I spent days trying to figure out how to configure that because it just wasn't straight forward. And then back before that, there was grunt trying to figure out how to build a pipeline with that. 

[00:20:27] It's amazing  far we 

[00:20:28] came. 

[00:20:29] Matias: [00:20:29] Yeah, there's a lot of change there. Webpack came to, to change everything and change our lives, but then. Yeah, thank you. People build things on top of webpack and is amazing, and one of the things that we can do now is all the other of the topics that you are really excited and interested in, in creating content that is JAMStack.

[00:20:48] Like then we already mentioned that I think that people must know, or at least have a feeling about what JAMStack is and you actually wrote a book. So can you drive us through the exciting world of JAMstack from the beginning? I'm a five-year old people. I don't know anything about JAMstack.

[00:21:07] So what is it?

[00:21:08] Colby: [00:21:08] I still need to publish that book as a physical copy, so I don't have that asterix on it anymore. Right. But yeah, so JAMstack at its core. It's kind of evolving. So I just want to preface with that, but kind of traditionally, it's the process of taking a website and compiling it down before it hits the browser.

[00:21:27] So. Before it hits the request in the browser and that a request chain so that what you're serving to the user is a completely static statically rendered web project. So traditionally that would happen with tools like Gatsby, where you're going to statically compile all of your files out into the static, HTM, male, JavaScript, CSS, and you're really hitting those files straight from storage.

[00:21:51] More recently, people are arguing whether or not like if you have a server, but you're sticking a CDN in front of it?

[00:21:57] It's still serving it statically from the CDN, because that kind of is JAMstack and I don't know, I don't really know. .

[00:22:03] I'll let the, the the JAMstack gods argue those things out.

[00:22:07] But yeah. I, I think from my perspective, I like to kind of focus on doing a static first approach and using serverless functions to kind of provide any dynamic API, like experiences on top of it. I just, I like the peace of mind of being able to have my project statically compiled out somewhere.

[00:22:22]And I haven't really, I haven't done it. Large web projects since my last company, but I was able to accomplish a lot with being able to take that approach and I've been enjoying it. And that's what I've kind of been keeping, keeping on with.

[00:22:36] Matias: [00:22:36] And I imagined as far as I understand NextJS. Is your jam for your JAMstack, right? So up. What ha what next have that, eh, accomplish all of your requirements? What, what are the 

[00:22:50] deal?

[00:22:52] Colby: [00:22:52] So one interesting thing about next JS before I get too deep into that is that NextJS has provides kind of two capabilities. It has the. Both the statically compiled aspect that I kind of enjoy, but it also has the ability to server-side render. And I just want to preface that because you kind of do have those options, but typically when I'm building next JS applications, I like to statically export it again.

[00:23:12] Cause I, I like going static first and I like having that peace of mind. But I think the thing that I liked the most about NextJS  is I feel like the API is like, particularly for things like fetching data and the way that the pages are kind of composed, I feel like it's. It's a more intuitive way of creating an application.

[00:23:30] And I'm really enjoying being able to create a product that way. And that's not supposed to be a slight towards any of the other projects because they're all incredibly great tools. There's so much awesome stuff that the community is doing. It's just, I feel, I really enjoy working with next JS as a tool.

[00:23:44] And I feel like they're doing things kind of. Right. So I'm really excited to see where they keep. 

[00:23:49] Matias: [00:23:49] Well, well, the things that I enjoy of this framework in particular next is that you mentioned the pain of setting up react from scratch and taking all of the decisions you need to do to define what tool you will use for, I don't know, routing, fetching, whatever 

[00:24:09] is already made.

[00:24:10] And you can go with that and all, if you have the requirement, you can escape from the decision of next, then do something else 

[00:24:18] Colby: [00:24:18] Exactly.

[00:24:19] Matias: [00:24:19] talking about next. You actually have a course by using next to create an eCommerce. 

[00:24:26] Colby: [00:24:26] Yes. 

[00:24:27] Yes. 

[00:24:27] Matias: [00:24:27] And it is it's actually an SSG e-commerce?.

[00:24:32] Colby: [00:24:32] Yes. So my course, I can't remember if I set up specifically next export, which exports it statically as a site, but everything I'm doing in there is statically generated. So you can deploy that on Netlify. You can deploy that in Vercel which  can take care of everything. But the point that it's a statically generated means it's a little bit more portable.

[00:24:52]But what I do inside of that application is I bring in all of the product data at compile time. So there's no requests on the server or inside of the browser to get that information that way. When somebody adds an item to their cart, they're able to store that information inside of the browser.

[00:25:10] Particularly, we use local storage to make sure that that state persist for somebody's cart, but then we push them off to Stripe checkout, which that's definitely, well, I'm not going to say definitely. I, I doubt that that's statically generated. But it's a completely different site from the site that.

[00:25:26] We create inside of the next JS  application, we push them off to the Stripe website to complete the checkout details, including providing a payment method and all that stuff. It's a really great solution because it provides a lot of those things out of the box, which is one of like part of the big challenges of creating e-commerce websites.

[00:25:44] There's so many small details that you have to think about for taking somebody's money. And it's great. That kind of Stripe checkout is able to do that really well. And. Relatively easy to integrate. 

[00:25:57] Matias: [00:25:57] Yeah. I hope that Stripe hear this and start setting up a service on Chile. But the question is  if your course create  SSG static site generated files.

[00:26:11] How you deal with new data, like new products on the, on the site, how that's  

[00:26:18] you solve that.

[00:26:19] Colby: [00:26:19] Sure. So the way that. I, I can't remember if I set it up inside the course, but the way that you would traditionally do that is anytime that source content changes. So typically you would manage that content inside of a inside of a CMS, right? So let's just use WordPress as an example. So if you're using WordPress as your CMS, you manage those projects in there.

[00:26:41] And then what happens is WordPress has a hook system. So does Netlify or Vercel, or really any of these hosting providers that.

[00:26:49] you can trigger a new deploy. So as soon as that content changes, it's basically like saying WordPress is going to go out and say, Hey, now if I make sure you build a new instance of this project and it's going to pull in all the latest data and make sure that the project is actually deployed with the latest state now, alternatively so that's like the static flow, right?

[00:27:07]But also you can. If you're managing that product data locally, like an JSON file at that point, you're still managing it and get, and if you're pushing that out to something like Netlify, it's automatically going to deploy anyway. So at compile time, it'll always pull in that latest version. 

[00:27:21]That means it's not going to be like to the seconds precise and updated to the CMS. But it's a trade off, right? It, alternatively, you can do something server-side but you're making that trade off. Providing that site statically, which is going to get a lot of benefits as opposed to server side, which might update a little bit quickly, but then you're going to have some more risks with things like scaling the servers and that stuff.

[00:27:44] So it's kind of the risk got to balance what you, what is going to work better for your use case? I, I like to say that the static first ideology is kind of like. Easily, not easily. You're able to kind of make that work and a lot of use cases, but it's definitely something you need to kind of weigh weigh in on for your particular project. 

[00:28:03] Matias: [00:28:03] Well for e-commerce, I've saw so many pricing errors that people just buy computers like for a cent that maybe  the statics flow will  save that, that the comments from those mistakes, because you have time, right. You can review first before deployed. So that's all good. Okay. To a boy that kind of situations, the errors that are user facing, you can rely not only in your code, not only in your content, but you too  will rely on your tests.

[00:28:38] And that brings us to another topic that you are actually working a lot because Applitools, right. That is testing. So, but just to frame things a little bit. In Applitools you are working and you're teaching and creating content and education about testing by the visual kind of side of things. So what is visual testing

[00:29:01] Colby: [00:29:01] yeah, I think you either have like I hear them both ways, visual testing, visual regression testing, but basically what it does is it's going to take a screenshot of your application. It's going to then compare future screenshots to that existing screenshot. So that first screenshot is going to be your base.

[00:29:20] And as you approve new iterations of that, it's going to update that baseline. So what you're really doing is making sure that every time you run that new test, that that screenshot is going to match that previous screenshot. Now, as you could imagine a lot of the time, a lot of the companies who do pixel.

[00:29:36] Or who do visual testing do  what's called pixel by pixel. So that means if even the slight has a bit difference of that image is different. Meaning if your content shifts by one pixel, you're going to get flagged by that entire thing. But the cool thing about Applitools. I know I sound a little salesy here, but it's, it's AI powered where what it's going to do is it's intelligently going to look at that image and it's going to be able to see that that change was because maybe the browser rendered it one pixel differently.

[00:30:05] So it can see that that content is still where it should be. And it is actually working as expected that you can focus on the actual meaningful results and not get false positives when you're trying to. The test your site. The cool thing also is not only does it intelligent  look at it from that perspective, but also if you have a blog, for instance, you're going to have dynamic content, right?

[00:30:28] Every time you push out a blog post, that's going to fundamentally change that page. So what you can do with Applitools is set up. like those regions in your application to be content-based where it's going to see that it's text and it's content base. And it's not going to flag those as errors, unless something shifts around what the actual layout of the project.

[00:30:51] So it's not going to flag again, false positives because you posted a new blog post, but it will flag if something breaks in that.

[00:30:59] UI. 

[00:31:00] Matias: [00:31:00] We should definitely share a kind of a demo or preview video on the show notes because it's actually, it looks amazing tool. I wasn't able to use it, but I saw demo 

[00:31:13] And

[00:31:13] is amazing.

[00:31:15] Colby: [00:31:15] And hopefully I explained that. Right. Cause I feel like I explained it more complicated than it is, 

[00:31:19] Matias: [00:31:19] I don't know it's, to me, it sounds good. So we can, we can work with that. And, but one question about testing that I think that is really usual and, and comes to every places that. Almost nobody's actually really being honest, doing testing, not everyone really have testing. Maybe in the backend people tend to have more like 90% of coverage on testing because it's kind of, I don't know if it's easier, but, but they are used to do it.

[00:31:51] Let's keep it like that. But in frontend people tend to not do it and  this visual thing is actually another layer of complexity for your testing. So even though it's an amazing tool, why do you think that people is just not doing it? We have really good tool like Cypres. I really  liked Cypres, but we don't have the luxury of time.

[00:32:18] Is 

[00:32:18] that?. 

[00:32:20] Colby: [00:32:20] Yeah. And I think that's an interesting point because I think part of the issue is that traditionally, like we haven't had. A lot of these great tools. Like if you think about a Cypress is still relatively new, right? Like it's, it's something that I feel like culturally, we're still kind of ingrained that the front end doesn't have meaningful test.

[00:32:40]But now that we have some of these more powerful tools that front end engineers can use, like JavaScript it's something that is closer to the developers to actually be able to implement themselves. I think also. It's, it can be more fun to do feature development, like honestly, and I think people gravitate to wanting to do that, but there is a lot of importance in providing those tests because especially if you're working on like a client product or something, like if you're, if you're spending more, you might end up spending more time working out, fixing bugs if you're not providing those tests.

[00:33:09]I think the interesting thing with Applitools though, is I feel like it's actually a lower it's while it might be more technically advanced in terms of what it's doing in terms of developer. Like it's actually a little bit easier because what you're doing is imagine if you're writing a Cypress test where you go to a website and you click on a button and you make sure that it logged in, right.

[00:33:33] You're basically doing that exact same thing, but each step of the way. You can take a snapshot with Applitools, which will take a screenshot. But what you're doing is you're verifying that that functionality is working as expected each step of the way. You're making sure that your homepage is working. Your sign-in page is working.

[00:33:49] You're making sure that your dashboard is loading correctly when you successfully log in and has a very broad, the level of testing across your entire application with that one snapshot. Where before you would have to set up a bunch of integrated tests to look at all the little details on the page to make sure that it's loading properly, where you're getting a lot of results from those, from those simple snapshots. 

[00:34:13] Matias: [00:34:13] Yeah, I really like it. And I think that you're right in this idea of maybe the tooling that we have for testing now, is it still new and the broader  community is not aware of it or used to use it. And we still in the ages of JS Dom and, and that kind of thing, that was basically a scrappers  around your web and kind of 

[00:34:36] really hard to write.

[00:34:38] So 

[00:34:39] Colby: [00:34:39] yeah.

[00:34:39] An interesting anecdote. The previous company that I worked with in our project, I had integrated Cypress  and I set up some basic tests where. Like I wouldn't say that it's a full suite of test to test the application, but it was basic things to make sure that the broad functionality that was working.

[00:34:56] But what we wanted to do is we wanted to hire a QA engineer to come in and pick up where I left off and finish out writing a bunch of integration test to test our flow. But what we noticed is at least in the area that we were hiring in, in the DC Metro area Washington DC area is. A lot of the QA engineers who were applying for that position, didn't even know what Cypress was, which was interesting.

[00:35:19] A lot of them were still based off of like the UI based testing platforms and not, not to throw shade on a name or anything, but a lot of them use Selenium, which is completely valid approach for  testing you know we just had that, that, face-off where I faced off with Angie and, you know, Cypress and selenium came side.

[00:35:36] But the point was that Cypress is still new enough where it hasn't yet. Caught on more broadly for the market. And it's still a relatively new tool that people are still trying to learn and get a market share for. 

[00:35:49] Matias: [00:35:49] Well in my opinion, I know about Cypress. For, I dunno years, I don't even know when, but, but it's easier. And a, think it's even easier to sell the use of  Cypress to  your team because it's easy to write test. So it's kind of a good trade-off . Like let's do this, let's avoid just another, the other testing thing.

[00:36:16] And at least we have integrations  so  

[00:36:18] Colby: [00:36:18] I agree. And especially cause it's like JavaScript based, right? So it's a syntax that if you're working on JavaScript based project, your team should already be somewhat aware. They just need to know the different commands for how to work with it.

[00:36:30] And at that point it's kind of jQuery based, which is. also ingrained in our cultures.

[00:36:34] So it's, you know, it should be easy to use those methods and work through it.

[00:36:39] Matias: [00:36:39] It's kind of telling to the browser to do what actually you need to do click here. Scroll there. Find this. Text. So 

[00:36:48] it's kind of the same thing.

[00:36:50] Colby: [00:36:50] And it ends up being more meaningful because not only are you testing the code, like you're testing how that actually works inside of the browser, which, you know, doing mocks and mounting virtually inside of a server might only get you so much information for how it.

[00:37:05] actually renders in browser.. 

[00:37:09] Matias: [00:37:09] testing, you know if you want to learn more about testing, there is a lot of content out there and, and Applitools is a good tool. And if you don't use Applitools it's up to you, but we recommend it. 

[00:37:21] Colby: [00:37:21] Sign up for a free account and let me know if you 

[00:37:23] need help. 

[00:37:24] Matias: [00:37:24] Yeah, Colby is your man. And Cypress Cypress.io is not sponsor  at this show and how, but if you want, you always can and visit that there is a good documentation, and there's a lot of good videos there.

[00:37:36] Colby. We are almost at the end of this episode, and I want to let you recommend something, whatever you like to the audience, something that just comes from Colby 

[00:37:49] itself.

[00:37:50] Colby: [00:37:50] So, is this, is this more like a non-technical pick or is it a technical pick 

[00:37:54] or 

[00:37:55] Matias: [00:37:55] Whatever you want and 

[00:37:56] just do your pick 

[00:37:58] Colby: [00:37:58] well, just because we were on the topic of testing, I guess. So we're doing this front end test Fest. It's a conference, it's a free conference. It's actually Applitools and Cypress are co-sponsoring it. If you go to frontendtestfest.com, it's on Tuesday, June 8th, and I'll actually be speaking there.

[00:38:12] So if you want to learn more about testing with the front end, there's a lot of cool things. Kent Dodds is also speaking there and Angie will be giving a talk.. 

[00:38:20] Matias: [00:38:20] Will be video? 

[00:38:21] Recordings of that, because this, this episode where we'd go 

[00:38:25] after.

[00:38:25] Colby: [00:38:25] oh, well, yeah. I would have to imagine that it will be recorded as well. So, 

[00:38:30]Yeah. absolutely. 

[00:38:32] Matias: [00:38:32] Yeah. And it's time to plug some of your massive amounts of content, picks something and plug in the show 

[00:38:41]For the audience 

[00:38:42] Colby: [00:38:42] so we already talked about from design to dev, so you can get it from designto.dev, but I also I'll say my next JS WordPress starter. And it's, it's really interesting to me because I've been enjoying kind of taking the WordPress world and trying to bring it into the JAMStack-ie next JS world. And there's a lot of challenges behind that..

[00:38:59] But it's been a, it's been a fun project to work on. And what you're able to do is you're able to take a default WordPress instance. All you need to do is installed WP graph, QL, and you can instantly create a new next JS site by plugging it in as an environment. Variable it's it's pretty great. Check it out on my github.com/colbyfacyock/ next-wordPress-starter. 

[00:39:20] Matias: [00:39:20] Yeah, thank you. It's a 

[00:39:22] quick and easy name. So 

[00:39:24] Colby: [00:39:24] Yep. 

[00:39:24] Matias: [00:39:24] you are better than the naming that me so the link will be in the show notes and to finish this off Colby, anything you want to tell to the audience? Final thoughts, like grandiloquent words   

[00:39:38] Colby: [00:39:38] sure. So I guess we can circle things circle back to the front of it. As you're learning, you know, Try to, I think the best way to learn is by doing so. And as you're doing that, try to also question the things that are happening. So as you're watching a tutorial, try to understand why they used a particular operator in JavaScript or why they did something a particular way.

[00:39:58] That's going to help you. Not only learn how to do things as you're watching that tutorial, but it's also going to help you learn the fundamentals to help grow as a developer. 

[00:40:09] Matias: [00:40:09] Completely agree. Well, we are finishing this episode, thank you so much for coming here. Colby follow Colby  on Twitter, and every other link will be in the show notes. 

[00:40:20] Colby: [00:40:20] Thanks so much Matias 

[00:40:21] Matias: [00:40:21] We hear us in the next week or at  week? That, you know, I'm a speaker Spanish . 

[00:40:30] Colby: [00:40:30] ciao.




Introduction
Jelly Drops: JS Fundamentals