JsConf Mexico 2021

audio original en español -- https://youtu.be/ZJQ9JUKp774 Today, every Single Page Application uses a Router. All frontend frameworks have one or more routers with more or less similar APIs. And we take this for granted, as if the topic of frontend routing is very simple, but on the contrary, frontend routing is a very complicated topic that is based on browser APIs that have changed a lot over the last 15 years. During this talk, we will talk about the APIs of the past, present and future that are hidden behind each frontend routing library and we will understand why it is urgent to have a new API for frontend routing.

English audio -- https://youtu.be/u2RgGv8WPN0 Hoy en día, toda Single Page Application usa un Router. Todos los frameworks de frontend tienen uno o varios routers con APIs más o menos parecidas. Y esto lo damos por hecho, como si el tema de frontend routing fuese muy simple, pero al contrario, el frontend routing es un tema muy complicado que se basa en APIs del navegador que han cambiado mucho a lo largo de los últimos 15 años. Durante esta charla, hablaremos de las APIs del pasado, presente y futuro que se esconden detrás de cada librería de frontend routing y comprenderemos porque urge disponer de una nueva API para el frontend routing.

english audio -- https://youtu.be/8nxTjv55DFE Crear un proyecto desde cero, that is the dream, right? Y con ello, nos encontramos repitiendo las mismas tareas una y otra vez. Desde crear el setup, pasando por el manejo de usuarios, inicio de sesión, hasta documentación. Pasan semanas antes de comenzar con el código específico de tu nuevo proyecto. Pero, ¿es necesario?

audio original en español - https://youtu.be/X-GpEWis9RU Create a project from scratch, that is the dream, right? And with it, we find ourselves repeating the same tasks over and over again. From creating the setup, through user management, login, to documentation. Weeks go by before you start with the specific code of your new project. But it is necessary?

audio en español - https://youtu.be/zw_J91BdDBQ I will start by identifying that everyone can enter a teaching role through informal mentorship, content creation, and formal teaching. I will discuss the strategies that best work for teaching people to code such as, showing vulnerability, creating digestible content, implementing methods such as spaced repetition and visual aides, gathering constructive feedback, and providing psychological safety. I will then end with suggestions of online instructors who embrace this style of teaching, so the audience can gain inspiration from them

english audio - https://youtu.be/T3PRPLJAgIY Comenzaré identificando que todos pueden ingresar a un rol docente a través de mentoria, la creación de contenido y la enseñanza formal. Discutiré las estrategias que funcionan mejor para enseñar a las personas a codificar, como mostrar vulnerabilidad, crear contenido digerible, implementar métodos como la repetición espaciada y ayudas visuales, recopilar comentarios constructivos y brindar seguridad psicológica. Luego terminaré con sugerencias de instructores en línea que adoptan este estilo de enseñanza, para que la audiencia pueda inspirarse en ellos.

audio español interpretado -- https://youtu.be/kn8WhpkTFwM After seeing the many stories about Internet connected devices being hacked or insecurely exposed to malicious actors, I wanted to figure out a way to secure my home while enjoying the ability to automate and control it remotely. Using moddable-xs, an open source JavaScript engine for constrained hardware, I’ll show how to use existing wireless protocols to control and monitor your home without requiring the Internet.

english original audio -- https://youtu.be/0JROQGWCmds Después de ver las muchas historias sobre dispositivos conectados a Internet pirateados o expuestos de manera insegura a actores maliciosos, quería encontrar una manera de proteger mi hogar mientras disfrutaba de la capacidad de automatizarlo y controlarlo de forma remota. Usando moddable-xs, un motor JavaScript de código abierto para hardware restringido, mostraré cómo usar los protocolos inalámbricos existentes para controlar y monitorear su hogar sin necesidad de Internet.

audio español - https://youtu.be/e3-xsuo53Oo In this talk, I will be talking about headless CMS that is helpful not just for Developers but for Content Creators where they can create content without worrying about the code and for Designers where they can express their exact design system and be sure nobody will break it.

english audio -- https://youtu.be/mXTRjDAMaVw En esta charla, hablaré sobre CMS sin cabeza que es útil no solo para desarrolladores sino también para creadores de contenido, donde pueden crear contenido sin preocuparse por el código y para diseñadores, donde pueden expresar su sistema de diseño exacto y estar seguros de que nadie lo romperá. .

Desarrolla una mejor experiencia para el usuario y para tu proyecto, usando a las máquinas de estado finitas con XState. Encuéntrales beneficio para el flujo y la lógica de las interacciones para tus componentes y en general para tú UX. Nos ensuciaremos las manos codificando una máquina de estado finitas en un ejemplo real.

audio español - https://youtu.be/bB13xZb-xlI DevOps is a set of practices that combines software development (Dev) and information-technology operations (Ops), which aims to shorten the systems development life cycle and provide continuous delivery and integration with high software quality. As JavaScript Devs , we can usually think that we have nothing to do with the infrastructure or operations. Wrong. Your code, your responsibility. Hey! Maybe you are thinking it’s simply too much. In this talk, we are going to see how a traditional web developer can assume DevOps functions avoiding some common mistakes or the well-known burnout.

english audio - https://youtu.be/Nb07xl-wj2M DevOps es un conjunto de prácticas que combina el desarrollo de software (Dev) y las operaciones de tecnología de la información (Ops), cuyo objetivo es acortar el ciclo de vida del desarrollo de sistemas y proporcionar una entrega e integración continuas con software de alta calidad. Como desarrolladores de JavaScript, generalmente podemos pensar que no tenemos nada que ver con la infraestructura o las operaciones. Incorrecto. Tu código, tu responsabilidad. ¡Oye! Tal vez estás pensando que es simplemente demasiado. En esta charla vamos a ver cómo un desarrollador web tradicional puede asumir funciones DevOps evitando algunos errores comunes o el conocido burnout.

english audio - https://youtu.be/4755eI9VK7Q Siempre diseñamos con un propósito definido, pero cuando hablamos del diseño como identidad no solo es importante entender el todo, si no también sus partes a profundidad. El pensamiento sistémico es clave a la hora de construir una metodología útil para estructurar los componentes de una interfaz gráfica desde el momento cero.

audio - español https://youtu.be/h3yH0c18GZc We always design with a defined purpose, but when we talk about design as an identity, it is not only important to understand the whole, but also its parts in depth. Systemic thinking is key when building a useful methodology to structure the components of a graphical interface from scratch.

english audio - https://youtu.be/nwDvGipW-JI ¿Sabes usar Typescript? Typescript es un superconjunto de Javascript para documentar los datos que esperamos. Typescript mejora la experiencia del desarrollador y ayuda a encontrar casos extremos más rápido. ¿Quieres aprender algunos trucos?

audio español - https://youtu.be/BBJC0qX9oJo Do you know how to use Typescript? Typescript is a Javascript superset to document the data we are expecting. Typescript improves the developer experience and helps find edge cases quicker. Want to learn some tricks?

english audio https://youtu.be/UGs_sVDSrxo Has escuchado a tus primos hablar de Monorepos y no tienes idea de que hablan? Entérate de que es, como construir y cómo funciona un Monorepo con 2 sencillas aplicaciones.

Audio español - https://youtu.be/gBCVrIsvRxw Have you heard your cousins talk about Monorepos and you have no idea what they are talking about? Find out what it is, how to build and how a Monorepo works with 2 simple applications.

english audio - https://youtu.be/qUqtZpiiP48 Tanto una base de código open source o una en el trabajo, ¡aclimatarse a una desconicida es difícil! Examinemos las herramientas que he desarrollado a traves del tiempo de manera eficaz. No te aflijas, ¡nos pasa a todos!

audio español https://youtu.be/MwFvrxCJ5Lk Whether it's an open source codebase or one at work, acclimating to an unknown is hard! Let's examine the tools that I have developed over time effectively. Don't worry, it happens to all of us!

english audio - https://youtu.be/F7347Whnlmc Los sitios estáticos son geniales. Son rápidos, baratos, seguros y fáciles de mantener. Pero generar activos estáticos es un proceso que toma cada vez más tiempo a medida que nuestro sitio se hace más grande. Hablaremos de la Regeneración Estática Incremental (ISR), una característica que nos ofrece el framework Next.js para generar páginas estáticas en tiempo de ejecución. Con él, obtenemos el beneficio de datos estáticos, pero compatibles con datos dinámicos y reproducción de páginas bajo demanda.

audio Espanol - https://youtu.be/Ort2-wcOrq4 Static sites are great. They are fast, cheap, secure, and easy to maintain. But generating static assets is a process that takes more and more time while our site gets bigger. We will talk about Incremental Static Regeneration (ISR), a feature that Next.js framework offers us to generate static pages at runtime. With it, we get the benefit of static, but supporting dynamic data and page re-rendering on demand.

audio español https://youtu.be/R_mtnhUm50o Netlify runs an annual survey of the Jamstack ecosystem, asking questions about working styles, languages, frameworks and tools. By focusing on the web specifically, we get a unique perspective about what web developers are up to. We share this data to help you as a developer get a sense of the broader landscape in which you're doing your job. Are you following industry best practices? Are you using outmoded tools? Are you at the cutting edge? These are useful things to know! We also have some data about how the pandemic changed the lives of web developers specifically.

english audio - https://youtu.be/R_mtnhUm50o Netlify realiza una encuesta anual del ecosistema Jamstack, haciendo preguntas sobre estilos de trabajo, lenguajes, marcos y herramientas. Al centrarnos específicamente en la web, obtenemos una perspectiva única sobre lo que están haciendo los desarrolladores web. Compartimos estos datos para ayudarlo como desarrollador a tener una idea del panorama más amplio en el que está haciendo su trabajo. ¿Está siguiendo las mejores prácticas de la industria? ¿Utiliza herramientas anticuadas? ¿Estás a la vanguardia? ¡Estas son cosas útiles para saber! También tenemos algunos datos sobre cómo la pandemia cambió la vida de los desarrolladores web en concreto.

Inicializar una aplicación de React Native con buenas prácticas no debería ser complicado! En este workshop navegaremos por uno de los boilerplates más utilizados en el mundo de react native para crear aplicaciones de nivel empresarial con una buena semántica, estructura y escalabilidad! Te esperamos

La accesibilidad web es un tema que a todas y todos los developers nos debe de importar, veremos cómo con buenas prácticas y pocas líneas de código podemos crear una web más accesible y menos restrictiva para personas con capacidades diferentes.

modV is build with JS and web technologies (Web Audio, Web GL, Canvas 2D, Web MIDI) wrapped into Electron for high portability. I did two workshops in that direction, but with a much longer total length. The challenge to cut this to 50 minutes is very awesome.

Audio español - https://youtu.be/pAJLR4W0190 Vite is a build tool that enhances the frontend development experience. Vite allows us to configure a development environment for Frameworks/Libraries such as Angular, React, Vue, Svelte among others with a real-time change system. Discover how ViteJS takes advantage of improvements to the JavaScript language to be the compilation tool of the future.

English audio - https://youtu.be/plAsq3EWi_c Vite es una herramienta de compilación que mejora la experiencia de desarrollo de frontEnd. Vite nos permite configurar un entorno de desarrollo para Frameworks/Librerias como Angular, React, Vue, Svelte entre otros con un sistema de cambios en tiempo real. Descubre como ViteJS aprovecha las mejoras al lenguaje JavaScript para ser la herramienta del futuro en compilación.

Audio español - https://youtu.be/30I_b8tQWZ8 Hygen is a very powerful and easy to use code generator. In this talk I will talk about the basic concepts, benefits, examples and success stories. Turn your team into true 10x developers but without the burnout that this usually entails.

english audio - https://youtu.be/SPll1Rxl_Es Hygen es un generador de código muy potente y fácil de usar. En esta charla hablaré de los conceptos básicos, beneficios, ejemplos y casos de éxito. Convierte a tu equipo en verdaderos 10x developers pero sin el burnout que esto normalmente conlleva.

English audio - https://youtu.be/fJBeD95_s4A Esta charla sin diapositivas muestra la creación de pruebas en JavaScript. Realizamos pruebas de sincronización de código en vivo, asíncronas con devoluciones de llamada, pruebas basadas en promesas y pruebas asíncronas/en espera. Creamos pruebas en Node, pruebas en el navegador y pruebas unitarias que se ejecutan desde CI. Esta puede ser una gran herramienta en su caja de herramientas de pruebas unitarias, pruebas de integración, pruebas de extremo a extremo, pruebas de componentes, etc.

audio español - https://youtu.be/Jn5Cbl3VrMk This no-slides talk demos creating tests in JavaScript. We live-code sync tests, async with callbacks, promise-based tests, and async/await tests. We craft tests in Node, tests in the Browser, and unit tests that run from CI. This can be a great tool in your toolchest of unit testing, integration testing, end-to-end testing, component testing, etc.

Audio Español - https://youtu.be/pHL5f4HQnFk NestJS is a server-side framework, developed for the use of Node and Typescript (recommended), it implements a modular architecture which allows building extensible and scalable applications. In this talk we will learn some basic concepts building a small live API.

english audio - https://youtu.be/Vr-83N8J-9c NestJS es un framework del lado del servidor, desarrollado para el uso de Node y Typescript(recomendado), implementa una arquitectura modular lo cuál permite construir aplicaciones extensibles y escalables. En ésta charla aprenderemos algunos conceptos básicos construyendo una pequeña API en vivo.

audio español https://youtu.be/YVBd1BxrPTI

english audio - https://youtu.be/Fm67RAMdP-Y

english audio - https://youtu.be/j5CnqS2oGRM Como desarrolladores, a menudo tenemos una relación de amor/odio con los lenguajes de programación. A veces, queremos tirar nuestra computadora al océano después de trabajar en un error durante varias horas, y otras veces queremos hacer un baile de victoria cuando nuestro código se ejecuta en el primer intento. En esta charla, compartiré algunos de mis proyectos de JavaScript únicos, tontos, divertidos, extravagantes y únicos, y compartiré por qué es importante divertirse y experimentar mientras se programa. Saldrás de esta charla con un nuevo amor por JavaScript (¡y con suerte algo de inspiración para nuevos proyectos paralelos!).p

audio español https://youtu.be/tP7JNFVoEQU As developers, we often have a love/hate relationship with programming languages. Sometimes, we want to throw our computer into the ocean after working on a bug for several hours, and other times we want to do a victory dance when our code runs on the first try. In this talk, I'll share some of my favorite silly/fun/quirky/unique JavaScript projects, and share why it's important to have fun and experiment while programming. You'll leave this talk with a new found love for JavaScript (and hopefully some new side project inspiration!).p