Pixels, Promesas y Pánico: Historias de Pesadillas en Producción

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Únete a mí en "Pixels, Promesas y Pánico" mientras nos adentramos en el mundo de los contratiempos en el frontend. Compartiremos 4-5 historias de terror reales desde las trincheras del desarrollo web. Desde desconcertantes errores del navegador hasta catastróficos desastres de código, estas historias son una mezcla de humor y precaución. Ya seas un desarrollador experimentado o recién estés comenzando, estas historias te entretendrán, iluminarán y nos recordarán a todos los giros inesperados en el mundo de la codificación.

This talk has been presented at C3 Dev Festival 2024, check out the latest edition of this Tech Conference.

Neciu Dan
Neciu Dan
28 min
15 Jun, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla aborda la importancia de prevenir y lidiar con errores en el desarrollo de software, con el orador compartiendo sus experiencias y soluciones. Se discute el impacto de los errores en la experiencia del usuario y los ingresos, la importancia de las pruebas de estrés y la implementación de alertas, y el sorprendente impacto de CSS. El orador también enfatiza la importancia de la simplicidad, el monitoreo y la refactorización, así como la necesidad de abordar las amenazas de seguridad y aprender de los fracasos. Se brindan consejos para escribir informes posteriores y se destacan los errores comunes a evitar, especialmente para los desarrolladores junior.

1. Introducción a Bugs Bunny

Short description:

Bienvenidos a la última charla del día. Estoy aquí para hablarles sobre cómo cometer errores y salir impunes. Los bugs son la principal causa de problemas graves para los desarrolladores. Pasan por alto las pruebas y causan estragos en los usuarios. Bugs bunny es inevitable, pero podemos evitar que rompan nuestro servicio de producción. Permítanme compartir mis experiencias y soluciones para ayudarles a evitar cometer los mismos errores. Tengo 4 o 5 historias para contar. He sido ingeniero de front-end durante 12 años y he trabajado en los tres grandes frameworks.

Bienvenidos a la última charla del día. Como Daniel me presentó, mi nombre es Nechu Dan. Normalmente me presento como Dan Nechu, pero fue un error porque en Twitter, se duplicó la N, así que decidí que no se veía bien, así que lo cambié.

Estoy aquí para hablarles sobre cómo cometer errores y salir impunes. Ese es el título de mi charla. Por lo general, en producción tenemos problemas, interrupciones, tiempo de inactividad, fallas del servicio, detenciones técnicas y colapsos del sistema. Todos estos son problemas graves que afectan a millones de desarrolladores en todas partes. Y, en el origen de todo esto, ¿cuál es la causa principal de estos terribles problemas que impiden a los desarrolladores dormir por la noche? Bueno, en realidad son los bugs.

Estos pequeños bribones feroces pasan por alto todas nuestras pruebas y aseguramiento de calidad manual, llegan a producción y causan estragos en nuestros usuarios, provocando pérdida de ingresos, frustrando a los usuarios todos los días. O estos son bugs, pero a los desarrolladores les gusta llamarlos pequeños errores. Pero ¿quién aquí sabe cómo se llaman realmente los bugs? Un par de personas. Supongo que se llaman bugs porque son asquerosos y aterradores, así que ¿por qué no llamarlos arañas o serpientes? Son aterradoras, mortales y más peligrosas que los bugs, o algo realmente, realmente aterrador como payasos.

La razón es que en 1947, en la Universidad de Harvard, un equipo de científicos de la computación vio que su gran computadora no funcionaba correctamente. Después de trastear un poco con el software y no encontrar nada, abrieron la computadora y lo que vieron dentro fue un bug que estaba pegado a la placa base. Esto también se hizo popular por la historia de la Dra. Grace Hopper, una de las inventoras de COBOL. Personalmente, no encuentro a los bugs aterradores porque suelo llamarlos bugs bunny. La razón de esto es, piénsenlo, bugs bunny nunca se rindió. Siempre burlaba a Elmer Fudd y encontraba la manera de conseguir lo que quería. Cambiaba repetidamente la temporada de caza de patos a la temporada de caza de conejos y engañaba a Elmer Fudd para que se disparara a sí mismo en la cara. Es lo mismo con los bugs. No importa cuánto intentes, cuántas personas involucres, cuántas pruebas automatizadas escribas, generalmente encuentran la manera de ser astutos y hacernos a nosotros, los desarrolladores, dispararnos en la cara. Así que bugs bunny es inevitable. Por eso es nuestro trabajo como ingenieros asegurarnos de que no engorde demasiado y rompa en nuestro servicio de producción y se coma todas nuestras zanahorias. Así que por eso estoy aquí hoy. Quiero hablarles sobre todas las veces que bugs bunny me engañó para que me disparara en la cara. Tengo cuatro o cinco historias dependiendo del tiempo. Cada una de estas soluciones tenía una solución obvia a posteriori, pero pensar en ello e implementar algunas de estas prácticas podría ayudarles a no cometer los mismos errores que yo cometí.

Sobre mí, he sido ingeniero de front-end durante 12 años. Nací en Rumania, pero vivo en la hermosa y soleada Barcelona. Me gusta escribir artículos técnicos y he trabajado en los tres grandes frameworks.

2. Cómo 20 niños rompieron la tabla de clasificación

Short description:

Me uní a la empresa con poco conocimiento de programación y me involucré en la construcción de múltiples proyectos. Desarrollamos un juego de navegador para niños, pero un bug les permitió hacer trampa en la tabla de clasificación. El problema causó una reacción negativa por parte de los padres y los medios de comunicación, pero finalmente lo solucionamos. Esta experiencia me enseñó la importancia de las pruebas de estrés y la implementación de sistemas de alerta adecuados.

Mi primera historia es cuando me uní a la empresa como un novato total en programación, sabía muchas cosas como estructuras de datos, programación dinámica, cómo invertir una lista enlazada y todo tipo de cosas que eran absolutamente inútiles cuando comencé mi primer trabajo. En cuanto al desarrollo web, solo sabía cómo posicionar cosas con position absolute por todos lados, pero la empresa en la que trabajaba tenía muchos proyectos y muy pocos desarrolladores, así que inmediatamente me quedé atrapado construyendo y construyendo, construyendo muchos proyectos, y ensuciándome las manos.

Por lo general, esta empresa era una empresa de externalización y nos gustaba hacer juegos de navegador. Así que allí estábamos construyendo esta fantástica experiencia de juego, un juego de señalar y hacer clic que ayudaba a los niños a aprender sobre los beneficios de la leche. El juego en sí era muy sencillo, incluso para niños de siete u ocho años. Tenías tres pequeños juegos y aparecía un carrito de leche, y si el niño veía la leche, tenía que hacer clic en ella y obtenía puntos. Si hacía clic en varias leches seguidas, obtenía el doble de puntos y podía crear una racha. Estos eran tres mini juegos y afuera teníamos una tabla de clasificación que mostraba los mejores 20 puntajes que los niños podían obtener. Y todos intentaban construirlo.

Ahora, una mecánica complicada de estos juegos es que, a medida que te movías, mantenía el mismo puntaje, y si pausabas, podías reiniciarlo en otro juego. Lo que no tenía en cuenta era lo motivados que estarían los niños de siete años por estar en la cima de la tabla de clasificación, especialmente considerando que no había premios, esto era solo un juego divertido y era un juego antes de que supiéramos sobre la gamificación, como los hábitos de duolingo y todas las cosas sofisticadas que conocemos ahora. En ese entonces, agregamos la tabla de clasificación solo por diversión. Probamos el juego durante meses, pero una semana después de su lanzamiento, volvimos al trabajo y nos sorprendimos al ver la tabla de clasificación así. Los puntajes estaban en miles de millones.

Inmediatamente pensamos, está bien, es una persona que creó 20 cuentas y hizo trampa. Encontró una forma de enviar los resultados con Postman o algo así, el puntaje y actualizar los valores en nuestra database. Así que asumimos lo peor y lo discutimos con nuestro cliente y prohibimos a las 20 personas en la tabla de clasificación, o como consideramos a una sola persona. Todo estaba bien durante un par de días, la calma antes de la tormenta, y luego nos bombardearon con correos electrónicos y llamadas de clientes, de las noticias, porque todos nos culpaban por hacer llorar a 20 niños de la misma clase, porque cuando los prohibimos, obviamente toda la escuela vio que ya no estaban en la tabla de clasificación, y luego comenzaron a llamarlos tramposos, y luego comenzaron a llorar y se lo contaron a sus padres, y lo único más aterrador en este mundo que una madre enfadada con un niño llorando es en realidad 20 madres enfadadas con niños llorando.

Así que se unieron, llamaron a la empresa, llamaron a las noticias y fueron tras nosotros, y llevó algún tiempo para que la tormenta, digamos, nos alcanzara, a la pequeña empresa que construyó el juego. Cuando lo hizo, descubrimos lo que había sucedido. Un niño de 7 años descubrió que si pausaba el juego mientras tenía la racha en marcha y luego lo reiniciaba y pausaba y reiniciaba, su puntaje se duplicaría. Y lo primero que hizo, por supuesto, fue convertirse en el primero de la tabla de clasificación, luego fue a sus amigos y se jactó de ello, y luego sus amigos comenzaron a hacer lo mismo y se convirtió en una competencia para ver quién podía obtener el mejor puntaje haciendo este truco que descubrieron. Y en realidad pensamos que eran hackers, pero en realidad solo estaban aprovechando el sistema. Y, por supuesto, una vez que encontré el bug, arreglarlo fue solo una línea de code, un if mal colocado que verificaba el puntaje local con el puntaje de la database. Así que una línea de code hizo llorar a 20 niños. Ese code estaba escrito en PHP. Así que podemos decir que PHP hace llorar incluso a los niños pequeños, no solo a los adultos. Al final lo arreglamos, nos disculpamos, restauramos las cuentas de los 20 mejores niños, pero les dimos puntajes adecuados y dejamos que la competencia amistosa continuara. ¿Qué aprendí de todo esto? En primer lugar, debes probar y estresar todo. Podríamos haberlo evitado fácilmente si tuviéramos un sistema de alerta que nos avisara si un puntaje era un valor atípico por encima de la mediana.

3. Financial Scare and the Impact of CSS

Short description:

Aprendí la importancia de tener límites y monitorear el tráfico. Experimenté un susto cuando alguien intentó extraer $50,000 de mi cuenta bancaria, pero resultó ser un error de facturación. También encontré otro problema financiero debido a un error de código. Ahora hablemos sobre el impacto sorprendente de CSS.

Y también no tomes decisiones precipitadas con las cuentas de tus usuarios. Explica y educa y sé más amable en general, especialmente con los niños.

Ahora la siguiente parte en realidad me da pesadillas hasta el día de hoy. Es una historia que es muy popular en la actualidad, pero me enorgullezco del hecho de que no tengo notificaciones push en mi teléfono, solo para cosas importantes como pager duty, algunos canales de Slack y alertas. Una mañana me desperté con una notificación push de mi banco que me decía que alguien acababa de intentar extraer $50,000 de mi cuenta bancaria, y pensaron que era fraude, y lo bloquearon . Estaba súper feliz, bloqueé la tarjeta solo para asegurarme de que no lo intentaran de nuevo, volví a dormir.

Mientras dormía, pensé, wow, qué buen banco, realmente me ayudaron esta vez. Pero mi segundo pensamiento fue, ¿qué hacker es lo suficientemente estúpido como para intentar $50,000 en el primer intento? ¿Por qué no intentar con $500? ¿Por qué no intentar con $800? Intentar obtener poco a poco. Y luego me di cuenta de que lo único que podría hacer que intentaran $50,000 si es una facturación legítima. Y luego salté de la cama, agarré mi teléfono y verifiqué el nombre del proveedor, y por supuesto que era Google. Así que no podía ser un falso como un príncipe nigeriano, o como mis amigos de la infancia de Rumania tratando de estafarme.

Ahora obviamente estaba horrorizado, mi mente ya estaba pensando en soluciones. Porque esto era bastante popular ahora, como tienes historias de que la cuenta de Netlify recibió una factura de $100,000, o la aplicación Kara que hace portafolios para diseñadores recibió una factura de $100,000 por tres días. Y por supuesto, hace siete años hubo una historia muy relacionada con Firebase donde alguien recibió una factura de un millón de dólares porque no cambiaron su estrategia de lectura. Pero yo no sabía todo esto, así que estaba contemplando soluciones. Así que tuve que ver qué recursos tenía en Google Cloud y moverlos, luego tuve que detener el proyecto que me estaba sangrando dinero porque no sabía dónde estaba, y finalmente, y lo más importante, tuve que mudarme al bosque y vivir una vida como un pastor, como el Bigfoot.

Mientras buscaba en todos mis proyectos y me golpeaba la cabeza, no podía encontrar de dónde venía la factura. Así que revisé nuevamente los correos electrónicos, comencé a llamar a la empresa en la que trabajaba, y ellos me informaron que alguien creó un proyecto de BigQuery y en lugar de poner la cuenta de facturación de la empresa, pusieron la mía. Así que la factura de $50,000 era una factura legítima para la empresa y se tardó alrededor de dos semanas en asegurarse de que la cuenta correcta fuera facturada, y para mí, esto fue como el mayor alivio en mi vida. Así que juro que nunca sentí un peso levantarse de mis hombros en ese momento. Pasé de tener una deuda de 50K a ser un hombre libre.

Entonces, ¿qué aprendí? Ten límites y monitorea el tráfico. Nunca tengas eventos o llamadas que se activen al cargar la página. Esto me sucedió nuevamente. Recibí otra factura de 10K debido a Mixpanel porque tenía un use effect para rastrear la página en cada página a la que vas, y un usuario quedó atrapado en un bucle. De todos modos, otra historia para otro momento.

Ahora, las cosas realmente aterradoras ya pasaron. Hablemos de algunas cosas menos importantes, como CSS. Normalmente con CSS, no crees que puedan causar muchos problemas, pero en realidad, wow. Entonces, si eres un diseñador o un desarrollador front-end, es posible que hayas escuchado esta expresión, como, haz que resalte, haz que sea atractivo, haz que esa página se vea bien, y en realidad, tendemos a complicar las cosas mientras que la simplicidad básica hace el truco.

4. The Importance of Simplicity and Monitoring

Short description:

Aprendí que lo simple siempre es mejor. Las pruebas visuales y el monitoreo de los eventos de finalización del proceso de compra son cruciales para garantizar una experiencia de usuario fluida y prevenir la pérdida de ingresos.

Esto realmente me sucedió cuando estaba construyendo un botón, la idea era hacer que la página fuera más dinámica. Entonces, cuando algo se está cargando, necesitamos mostrarlo en el botón, así que agregamos un estado de carga cuando la página estaba obteniendo algunos data, para que el usuario supiera que estábamos haciendo algo por él. Por supuesto, también teníamos este botón en el formulario de compra, así que cuando teníamos esto y el usuario cambiaba los métodos de pago, verificábamos si el método de pago era válido, y aparecía el botón de carga, pero como el proceso de compra se construyó en un framework diferente al framework que estábamos usando, teníamos React en nuestra aplicación principal y el proceso de compra se construyó en Angular 1, un antiguo sistema heredado. La reactividad en el botón era diferente y aplicaba la carga, pero nunca la quitaba después de que fuera válida. Entonces, los usuarios cambiaban el método de pago y veían la carga, pero nunca desaparecía. El botón funcionaba, pero veían la carga y simplemente no hacían clic en él. El problema con esto fue, por supuesto, que solo se tomaban pequeñas cantidades de dinero de los ingresos, porque algunas personas hacían clic en él y continuaban, y otras personas nunca cambiaron el método de pago, por lo que fue un porcentaje muy, muy bajo que nos costó alrededor de 20,000 al día, y no fue hasta que llegamos al final del mes y comparamos nuestros pedidos mensuales con los del mes anterior, y pensamos, bueno, algo está mal, ¿qué está pasando? Luego revisamos los eventos y vimos que las personas agregaban cosas al carrito pero nunca completaban la compra. ¿Qué está mal? Nos llevó tres o cuatro días descubrir que teníamos un problema con el botón CSS. Entonces, ¿qué aprendí de esto? Lo simple siempre es mejor. Hay una razón por la cual Amazon tiene el mismo proceso de compra desde 1990. Ahora puedes usar pruebas visuales que toman capturas de tu implementación de componentes y verificarlo con tu canal de integración y entrega continua (CI/CD) para asegurarte de que lo que estás enviando a producción sea bueno o no. De esta manera, tienes un método para declarar cada vez que envías un code a producción, se compara con lo que había antes, la imagen que había antes, y se compara el resultado. Si hay cambios, te pregunta, ¿está bien? ¿Quieres esto en producción? Sí o no? Y una parte realmente importante es monitorear los eventos de finalización del proceso de compra y recibir alertas si algo está fuera de lo común.

5. Refactoring and Dealing with Hackers

Short description:

Simple es mejor. El refactoring es importante, pero hay ciertas áreas, como el proceso de compra y la autenticación, donde se debe evitar. Los hackers atacaban a mi empresa anterior a diario y tuvimos que lidiar con diversas amenazas de seguridad. Un incidente involucró un problema autoinfligido accidental causado por rutas y redirecciones antiguas. Nos llevó tiempo identificar el problema y resolverlo.

Oh, sí. Esto. Simple es mejor. Utiliza pruebas visuales y monitorea los eventos de finalización del proceso de compra.

Ahora, llegamos a una sección, mi última historia, donde todo se trata del refactoring. Cada vez que hacemos refactoring, el 60 por ciento de las veces, funciona cada vez. Así que este debería ser como un lema general para los ingenieros de software en todas partes. Bromas aparte, hay un par de lugares donde nunca querría hacer refactoring, como el proceso de compra o la autenticación. Así que dejaré estas historias para otra ocasión. Puedes encontrarme en la sección de preguntas y respuestas. Podemos discutir algunas historias realmente interesantes.

Mi última historia, se trata de los hackers. Mi última empresa, muy grande, en 26 países, 13 idiomas, así que debido a que era una empresa tan grande y conocida, era atacada por hackers todos los días. Por lo general, intentaban obtener códigos promocionales o crear cuentas falsas, intentaban desestabilizar la aplicación o cualquier otro niño que intentara hackearla y hacer que cosas divertidas sucedieran. Así que teníamos un buen servicio de firewall y también teníamos un equipo de guardia que, si algo salía mal, recibíamos la notificación en nuestros teléfonos. Teníamos que ir a la computadora portátil, reunirnos y discutir qué estaba mal. Esto sucedió mientras estábamos almorzando un día. Las alarmas comenzaron a sonar en la habitación. Todos miraron sus teléfonos. Vale, algunos hackers están intentando desestabilizar la aplicación. Está bien. El Amazon WAF se encargará de ello. Silenciamos la alarma, volvimos a nuestra comida y luego volvió a sonar, esta vez más fuerte y más fuerte, así que corrimos hacia nuestras computadoras portátiles y el sitio web estaba completamente caído. Así que nos reunimos. Teníamos ingenieros de personal, ingenieros principales, infraestructura, seguridad, 30 o 40 ingenieros allí tratando de descubrir cómo estos hackers podían evadir todas nuestras medidas de seguridad , evadir el firewall, evadir todo y desestabilizar la aplicación. Y luego, nos llevó alrededor de 30 o 40 minutos, pero descubrimos que el culpable era en realidad nosotros. Nos lo hicimos a nosotros mismos. Lo que sucedió es que teníamos muchas rutas antiguas que redirigían a los bots desde rutas heredadas a las nuevas rutas, y pusimos algo en producción que cambió un parámetro que hacía que todos los usuarios pasaran por este proceso de redirección que estábamos haciendo para los bots. Y cuando un usuario iba a la página, en realidad era redirigido a través de siete páginas. Y debido a que todas estas redirecciones eran del lado del servidor, también aumentaba el número de llamadas a la API que estábamos realizando.

6. Learning from Failure and Appreciating Bugs Bunny

Short description:

Así que creamos una recursión que causó demasiadas solicitudes. Lecciones aprendidas: no atacar tu propia aplicación, evitar usar el patrón de modelo de objeto de página para pruebas de extremo a extremo con lógica de redirección compleja y siempre ser rápido al responder a las alertas. Al final, el fracaso nos enseña a empatizar con los usuarios, tomar decisiones informadas, tener alertas en su lugar, realizar análisis posteriores al incidente para prevenir problemas futuros y apreciar las lecciones aprendidas de cada fracaso.

Así que comenzamos a hacer 100 llamadas más a la aplicación de lo normal, y el firewall realmente vio esto y pensó, hmm, este servicio está haciendo demasiadas llamadas a la aplicación, y luego nos bloqueó. Así que al menos el firewall estaba funcionando correctamente. Esto también pasó nuestra prueba de extremo a extremo porque teníamos, como, la prueba de extremo a extremo verificaba que pasaste de la página A a la página B. Nunca verificamos el flujo completo en una sola prueba. Por supuesto, pasamos de la página A a la página B, pero también fuimos a C, D, A y F y tres veces a G antes de llegar a la página B. La prueba pasó y el code se fue a producción. En siete, en realidad ocho minutos, la aplicación se cayó durante la hora del almuerzo. Sí, básicamente esto. Creamos una recursión que creó demasiadas solicitudes. Entonces, ¿qué aprendí? No ataques tu propia aplicación, eso es realmente, realmente malo. Trata de no usar el patrón de modelo de objeto de página para tus pruebas de extremo a extremo si tienes una lógica de redirección compleja oculta en middlewares, y siempre sé rápido al responder a las alertas. Ahí lo tienes. Cuatro historias de fracaso que sucedieron en mi career. Tuvimos cómo hacer llorar a los niños y salir impunes, cómo evitar una factura de 50K, cómo estilizar tus botones de CSS y cómo hacer que tu aplicación se caiga con solicitudes adicionales. Pero en serio, aprendí muchas cosas geniales que me hicieron un mejor desarrollador, como empatizar con tus usuarios y no tomar decisiones precipitadas, la importancia de tener alertas en su lugar para cosas que son excepcionales, y cada fracaso debe ser analizado críticamente, y es muy bueno escribir un análisis posterior al incidente después de que un problema haga que tu sitio web se caiga, porque aquí puedes escribir un documento en el que analices la causa raíz, escribas cómo podemos prevenir esto en el futuro y cómo podemos mitigarlo para asegurarnos de que esto nunca vuelva a suceder, y luego compartes este documento con toda tu organización, para crear conciencia y compartir conocimientos. Finalmente, esto pasará. Puedes pensar que es el fin del mundo y que hiciste algo realmente, realmente malo, pero aprendemos a no ser enemigos mortales de Bugs Bunny y realmente apreciarlo por hacer que nuestra aplicación sea más fuerte y mejor con cada túnel que construye. Así que gracias. APLAUSOS.

QnA

Responsabilidad de los Análisis Posteriores al Incidente y Errores Comunes

Short description:

Bien, entonces, ¿quién debería ser responsable de escribir los análisis posteriores al incidente? La persona que creó el problema. Para garantizar un análisis exhaustivo, se requiere la revisión de otras partes involucradas. Para asegurarse de que los análisis posteriores al incidente sean leídos, establecimos un grupo de correo electrónico y utilizamos Google Docs para facilitar la colaboración. Para las pruebas de extremo a extremo, considera un proyecto separado que verifique la producción después de cada implementación. El error más común que arruina las aplicaciones es no verificar el código fuera de la funcionalidad que se está construyendo. Los desarrolladores junior deben verificar que su código no rompa otras partes de la aplicación.

Bien, entonces, ¿quién debería ser responsable de escribir los análisis posteriores al incidente? Bueno, obviamente, la persona que creó el problema en primer lugar. Si fueron dos o tres personas del equipo, o si fueron varios equipos los que crearon un problema, generalmente se asigna una persona dedicada de cada equipo. Sí, y ellos lo analizan y escriben el documento. Por lo general, también requieren revisiones de otras personas que estuvieron involucradas, como security, infraestructura, y demás.

Bien, y acabas de terminar esa parte, y la siguiente pregunta se relaciona directamente con eso, porque un problema que la gente tiene con los análisis posteriores al incidente es que los escribimos, pero no todos los leen. Entonces, ¿cómo pasamos de esta etapa, donde está escrito, por favor lean mi análisis posterior al incidente? Quiero decir, una cosa que hicimos es tener un grupo de correo electrónico, como ingeniería, y enviamos ese análisis posterior al incidente a todos en ingeniería, y tenían que leerlo. Era opcional, por supuesto, pero creamos una cultura de hacer preguntas y participar en el documento, y utilizamos Google Docs, por lo que era fácil y muy intuitivo para que todos lo lean y colaboren en el documento, básicamente. Bien, sí, eso tiene mucho sentido. Veamos dónde estamos. Oh, alguien está preguntando acerca del segundo punto en la diapositiva anterior, ¿qué patrón puedo usar en lugar del modelo de objeto de página? ¿Cómo lo manejaron ustedes? ¡En realidad no lo cambiamos! Pero es muy bueno tener un proyecto separado que no verifique a nivel de CI/CD, sino que verifique la producción después de cada implementación. Así que tienes, como, escribes, pero esto no puede funcionar para cada historia de usuario o todo lo que tienes. Tiene que ser específico para tu negocio. Entonces, si tienes un sitio web de comercio electrónico, básicamente es agregar un producto a tu carrito, ir al pago y poder ingresar el dinero, y que diga pedido completado. Así que la prueba de extremo a extremo más simple, pero se ejecuta en producción después de cada implementación, para asegurarte de que al menos el flujo principal funcione el 100 por ciento del tiempo. Tiene sentido. Definitivamente. Déjame ver esto. Oh, alguien está diciendo, hay una pregunta, pero al final de la pregunta, dicen, ¡buen peinado! Pero la pregunta, vamos a ello. Entonces, lo que están preguntando es cuáles dirías que son los errores más comunes que cometen los ingenieros junior o de nivel de entrada en las aplicaciones? Bueno, creo que para no ser considerado un ingeniero junior, debes al menos borrar la base de datos de producción una vez en tu vida. Tienes que hacer eso, de lo contrario no eres parte de la pandilla. Pero los errores más comunes que veo son, quiero decir, ahora es más difícil debido a TypeScript, cometer errores. TypeScript realmente te ayuda a mantener todo en línea. Los errores más comunes que cometí fue no verificar si mi code funciona. Básicamente, confiar en mis pruebas, confiar en mi, o no verificar fuera de la funcionalidad que estoy construyendo. Estoy construyendo una funcionalidad, verifico que si presiono este botón, funciona, perfecto, pero luego se implementa en producción y rompe algo más en la otra parte de la aplicación. Así que no entrar y verificar y al menos asegurarme de que no estoy rompiendo otras cosas, ese es uno de los errores más grandes que cometen los desarrolladores junior.

Mishaps and Tips for Junior Developers

Short description:

Mientras esperamos más preguntas, permítanme compartir una historia sobre un error de migración que expuso las cuentas de usuario. Otro error divertido involucró las migas de pan y las páginas de perfil. Para los desarrolladores junior, se recomienda encarecidamente tener un sistema de diseño y escribir pruebas.

De acuerdo, veamos en qué punto estamos con las preguntas. Todavía nos quedan cuatro minutos. Sigan adelante, todos. Sé que esta es la última, pero todavía nos quedan cuatro minutos.

Mientras esperamos que aparezcan más preguntas, porque todavía nos quedan cuatro minutos y no hay nada aquí en este momento, les voy a preguntar, ¿podrían aclarar un poco uno de los puntos que dejaron de lado? Porque mencionaron que, bueno, obviamente tendremos la sesión de preguntas y respuestas después, pero ¿pueden adelantar cuál sería el otro punto que dejaron de lado? En realidad, trabajamos en mi empresa anterior en una migración de authentication. Estábamos pasando de un servicio a otro. Y todo iba muy bien, lo probamos, fue un proyecto de seis meses, y luego, cuando lo lanzamos, tuvimos que migrar las contraseñas de los usuarios porque estaban utilizando un método de criptología diferente. Así que cuando hicimos esto, no sé qué salió mal en el backend o en el frontend, pero los usuarios en realidad veían las cuentas de otros usuarios cuando ingresaban a la aplicación. Y se convirtió en un espectáculo lamentable, la gente canceló sus cuentas y tuvimos que disculparnos. Fue un gran problema.

Cuando mencionaste criptología, alguien empezó a reírse. No sé si fue porque estaban relacionados con ese problema o si fue por la pregunta que acaba de aparecer. Preguntaron si había algún error notable y divertido que recordaran debido a algunas malas elecciones de design. Hmm. Bueno, hay algunas cosas en las que los diseñadores no piensan, como la complejidad. Hacen algo que creen que es muy fácil de implementar, y como lo implementamos, tampoco pensamos en las implicaciones. Por ejemplo, teníamos algunas migas de pan. Y ellos design las migas de pan de tal manera que cuando haces clic en el segundo nivel, aparece un modelo y puedes moverte por la aplicación de diferentes formas. Y tenía sentido de alguna manera. Y lo implementamos, pero debido a esto, teníamos, digamos, una página de perfil de alguien, como una aplicación de redes sociales. Y porque ahora puedes moverte, antes no podías, pero con estas migas de pan, podías moverte de una página de perfil a otra página de perfil, los defectos de uso nuevamente no tenían una comprobación para la ID de perfil. Así que las personas se movían de perfil en perfil y veían algunos data del antiguo perfil, y luego se asustaban de nuevo. Así que, sí. Obviamente fue un error del desarrollador, pero se produjo en producción debido a una idea del diseñador, digamos. Wow. Todavía estoy tratando de procesar eso. Verifiquemos nuevamente en qué punto estamos con las preguntas. De acuerdo. Solo cargando. ¿Alguien está preguntando en el ínterin si podrías compartir algunos tips para desarrolladores junior? Bueno, creo que tener y trabajar en un sistema de diseño es una práctica muy buena, y tener componentes realmente simples que se reutilicen en todas partes de la aplicación es muy fácil y asegúrate de no cometer tantos errores porque no estás reinventando la rueda. Así que diría que sí, para los desarrolladores junior, tener un sistema de diseño y una biblioteca de componentes realmente podría ayudarles. Y también escribir pruebas. Comienza a escribir pruebas. Es realmente, realmente útil. Oh, sí. Estoy completamente de acuerdo con eso. La cantidad de veces, si no hubiera tenido pruebas, creo que todos estamos de acuerdo con eso. No vamos al grano. Creo que no tenemos más preguntas en este momento.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top ContentPremium
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
Remix Flat Routes – Una Evolución en el Enrutamiento
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – Una Evolución en el Enrutamiento
Top Content
Remix Flat Routes is a new convention that aims to make it easier to see and organize the routes in your app. It allows for the co-location of support files with routes, decreases refactor and redesign friction, and helps apps migrate to Remix. Flat Folders convention supports co-location and allows importing assets as relative imports. To migrate existing apps to Flat Routes, use the Remix Flat Routes package's migration tool.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced 2023React Advanced 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Top Content
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
Solucionando Problemas de Rendimiento en React
React Advanced 2023React Advanced 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.

Workshops on related topic

Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
Workshop
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
Construye una sala de chat con Appwrite y React
JSNation 2022JSNation 2022
41 min
Construye una sala de chat con Appwrite y React
Workshop
Wess Cope
Wess Cope
Las API/Backends son difíciles y necesitamos websockets. Utilizarás VS Code como tu editor, Parcel.js, Chakra-ui, React, React Icons y Appwrite. Al final de este masterclass, tendrás los conocimientos para construir una aplicación en tiempo real utilizando Appwrite y sin necesidad de desarrollar una API. ¡Sigue los pasos y tendrás una increíble aplicación de chat para presumir!
Problemas difíciles de GraphQL en Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Problemas difíciles de GraphQL en Shopify
Workshop
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
En Shopify a gran escala, resolvemos algunos problemas bastante difíciles. En este masterclass, cinco oradores diferentes describirán algunos de los desafíos que hemos enfrentado y cómo los hemos superado.

Tabla de contenidos:
1 - El infame problema "N+1": Jonathan Baker - Vamos a hablar sobre qué es, por qué es un problema y cómo Shopify lo maneja a gran escala en varios APIs de GraphQL.
2 - Contextualizando APIs de GraphQL: Alex Ackerman - Cómo y por qué decidimos usar directivas. Compartiré qué son las directivas, qué directivas están disponibles de forma predeterminada y cómo crear directivas personalizadas.
3 - Consultas de GraphQL más rápidas para clientes móviles: Theo Ben Hassen - A medida que tu aplicación móvil crece, también lo harán tus consultas de GraphQL. En esta charla, repasaré diversas estrategias para hacer que tus consultas sean más rápidas y efectivas.
4 - Construyendo el producto del futuro hoy: Greg MacWilliam - Cómo Shopify adopta las características futuras en el código actual.
5 - Gestión efectiva de APIs grandes: Rebecca Friedman - Tenemos miles de desarrolladores en Shopify. Veamos cómo estamos asegurando la calidad y consistencia de nuestras APIs de GraphQL con tantos colaboradores.
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
React Summit 2024React Summit 2024
92 min
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
WorkshopFree
Vivek Nayyar
Vivek Nayyar
Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.
De 0 a Autenticación en una Hora para tu Aplicación JavaScript
JSNation 2023JSNation 2023
57 min
De 0 a Autenticación en una Hora para tu Aplicación JavaScript
WorkshopFree
Asaf Shen
Asaf Shen
La autenticación sin contraseña puede parecer compleja, pero es fácil de agregar a cualquier aplicación utilizando la herramienta adecuada.
Mejoraremos una aplicación JS de pila completa (backend Node.js + frontend Vanilla JS) para autenticar usuarios con contraseñas de un solo uso (correo electrónico) y OAuth, incluyendo:
- Autenticación de usuario: Gestión de interacciones de usuario, devolución de JWT de sesión / actualización- Gestión y validación de sesiones: Almacenamiento seguro de la sesión para solicitudes posteriores del cliente, validación / actualización de sesiones
Al final del masterclass, también abordaremos otro enfoque para la autenticación de código utilizando Flujos de Descope en el frontend (flujos de arrastrar y soltar), manteniendo solo la validación de sesión en el backend. Con esto, también mostraremos lo fácil que es habilitar la biometría y otros métodos de autenticación sin contraseña.