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

Rate this content
Bookmark

Ú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.

QnA

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

Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top Content
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.
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.
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.
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.
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

Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured 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
Featured Workshop
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.
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
WorkshopFree
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
WorkshopFree
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
WorkshopFree
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.
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.