Name: JSNation Live 2020
Start: 2020-06-16T22:00:00.000Z
End: 2020-06-17T22:00:00.000Z

Existen otras formas de transmitir video en vivo desde un navegador a un punto final RTMP, pero ¿qué pasa si queremos interactuar con ese flujo primero? Y no solo interactuar escribiendo filtros oscuros de ffmpeg, sino simplemente con buen HTML y CSS. ¡Hagámoslo! Hablaremos sobre cómo permitir que tus transmisores vayan en vivo directamente desde su navegador utilizando Chrome sin cabeza y ffmpeg.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Transmitiendo en vivo desde un navegador...con otro navegador

This Talk discusses live chat and live broadcast using WebRTC and RTMP. It explores running WebRTC on a server via Chrome and alternative approaches like using GetUserMedia and the Chrome.tabCapture API. The use of a whole Chrome instance for WebRTC and RTMP broadcast is also discussed, highlighting the pros and cons of this approach. The Talk recommends checking out Nick's talk from All Things RTC for more information.

Matt McClure

JavaScript moderno es poderoso, pero los grandes frameworks como Vue o React añaden una cantidad abrumadora de complejidad al flujo de trabajo de los desarrolladores. Por eso escribí AlpineJS. Tiene menos de 10kb, no requiere un proceso de compilación, se aprende en poco tiempo y te brinda la plantilla declarativa y la reactividad que no puedes vivir sin ellas. No puedo esperar para mostrártelo. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Di no a la complejidad con AlpineJS

Alpine.js is a lightweight framework for creating JavaScript behavior directly in markup. It has 13 directives and 6 magic properties, making it like Tailwind for JavaScript. The upcoming version of Alpine will focus on performance and optimization. It sits between jQuery and Vue, offering reactivity without compilation. Alpine.js is robust and resilient for DOM manipulation, and works well with Laravel for localization and internationalization.

Caleb Porzio

¿Microfrontends como monolito? ¿Biblioteca de componentes compartidos o guía de estilos? Esta técnica permite consumir módulos de compilaciones separadas, que pueden ser desarrolladas e implementadas de forma independiente. Una introducción y más ideas. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Federación de módulos en Webpack 5

This Talk discusses module federation in Webpack 5 as a scalable solution for shared dependencies in large applications. Module federation allows separate builds for different parts of an application, reducing build time and deploy delay. It features exposed and shared modules, asynchronous loading, and container creation. Module federation supports container orchestration techniques and aims to integrate with ECMAScript modules. However, optimization and sharing in module federation may impact code size, and careful evaluation is necessary. Updating containers can be managed through active testing for stability.

Tobias Koppers

¿Por qué '👩🏿‍🎤'.length = 7? ¿Es JavaScript UTF-8 o UTF-16? ¿Qué sucede bajo el capó cuando estableces ? ¿Alguna vez te has preguntado cómo se codifican los emojis y los lenguajes de escritura complejos para funcionar correctamente en navegadores y dispositivos, para miles de millones de personas en todo el mundo? ¿O cómo se introducen y aprueban nuevos emojis? ¿Alguna vez has visto uno de estos: □ � caracteres de glifo 'especiales' antes y quieres más información sobre por qué podrían aparecer y cómo evitarlos en el futuro? ¡Hablemos sobre la codificación Unicode en JavaScript y en la World Wide Web! Repasaremos las mejores prácticas, los problemas comunes y proporcionaremos recursos para aprender más, ¡incluso dónde ir si quieres enviar una nueva propuesta de emoji! :) <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Codificación de emojis, Unicode e internacionalización

This Talk explores the UTF-8 encoding and its relationship with emojis. It discusses the history of encoding, the birth of Unicode, and the importance of considering global usage when building software products. The Talk also covers JavaScript's encoding issues with Unicode and the use of the string.prototype.normalize method. It highlights the addition of emoji support in Unicode, the variation and proposal process for emojis, and the importance of transparency in emoji encoding. The Talk concludes with the significance of diverse emojis, the recommendation of UTF-8 for web development, and the need to understand encoding and decoding in app architecture.

Naomi Meyer

Esta charla tratará sobre react-three-fiber. Vamos a crear un mini juego juntos. Veremos cómo incluso los principiantes pueden superar todo el código boilerplate y las matemáticas sin volverse locos, y luego traducirlo a cualquier cosa, ya sea un juego o un sitio web con efectos visuales interesantes.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Creando juegos en React

This Talk provides an introduction to game development in React using React 3.0 Fiber and three.js. It covers topics such as creating 3D objects, understanding meshes and lighting, adding interactivity and physics, controlling objects with mouse input, and creating enemies. The speaker emphasizes the ease and power of React 3.0 Fiber for game development and encourages experimentation and learning through examples and resources.

Paul Henschel

En mi viaje por el mundo de Node, siempre me pregunto cuánto cuestan mis abstracciones. Comencé un viaje para escribir un framework HTTP con una sobrecarga extremadamente baja, y nació Fastify. Con su capacidad para alcanzar asombrosas 90k solicitudes/segundo, Fastify puede reducir a la mitad tu factura de servidor en la nube. En esta charla, te guiaré a través de los conceptos básicos del framework: cómo enrutamiento de solicitudes, escribir pruebas y usar el sistema de plugins. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

1, 2, 3... ¡Fastify!

Fastify is a web framework that started in 2016 and is easy to use. It supports logging, splitting the app into separate files, and auto-loading routes. Fastify also provides authentication and user login functionality. It differs from other frameworks by fully supporting Async Await and the latest JavaScript features. Matteo Collina, the speaker, prefers Vim and T-Max as his IDE and enjoys Italian pizza as his comfort food.

Matteo Collina

Has construido una aplicación y quieres que escale. ¿Quieres CI/CD, dominios personalizados, certificados SSL, APIs, escala global de tus activos estáticos, autenticación y autorización? Aprendamos cómo construir una aplicación web estática en Azure y pasar de un repositorio de GitHub a escala global en minutos. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

¡De código a escala! Construye una aplicación web estática en minutos

The Talk discusses the development of web applications and the challenges involved, such as code management, CI/CD, routing, security, and scalability. It explores the use of Azure Static Web Apps for building and deploying static web apps with features like authorization, authentication, and serverless technology. The process of creating a static web app on Azure Portal is demonstrated, along with resource creation, deployment, and custom domain setup. The Talk also covers API deployment, authentication, authorization, and role-based access control. Azure Static Web Apps is highlighted as a globally distributed solution for building web apps.

John Papa

En esta charla, repasaré la evolución de las herramientas de JavaScript y las herramientas de construcción front-end, el propio JavaScript y su futuro. También hablaré sobre Babel y otras herramientas de construcción, lo que podrían ser en el futuro. Además, hablaré sobre JavaScript en sí como lenguaje, su presente y su futuro. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Herramientas de JavaScript: La Evolución y Futuro de las Herramientas de JS y Construcción Front-end

Today's Talk covers the evolution and future of Javascript tooling, including dependency management, transpiling, bundling, minifying, and module management. Webpack has grown in popularity and offers features like hot module replacement and code splitting. Other build tools like Rollup, Parcel, Snowpack, and ESBuild are also discussed. The Talk explores browser import and bundling-free approaches, and emphasizes the dynamic nature of the JavaScript ecosystem with evolving tools and project-specific trade-offs.

Shedrack Akintayo

DeliveryHero es una gran empresa internacional. Y como en toda gran empresa, la introducción de una nueva mejora técnica es un tema candente. Conozca los desafíos que nuestro equipo enfrentó al hacer que nuestra plataforma sea probada de extremo a extremo, cómo mejoraron nuestros mecanismos de informes con el tiempo y las soluciones que desarrollamos para probar diferentes variaciones de una función. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Adaptación de las Pruebas E2E para un Gran Proyecto

This Talk introduces the adaptation of end-to-end testing for a project, highlighting its benefits in improving resilience and calmness during deployment. The speaker mentions the team's size, daily pull requests, and the size of their codebase. They also discuss the use of cookies to test different versions of a feature on a page and their plan to improve by adding E2E tests to a CICD pipeline and consolidating tests in their monorepo.

Vadym Kukhtin

Devesh Jadon

TypeScript se está convirtiendo en una de las formas dominantes en las que la gente escribe JavaScript. El objetivo de TypeScript es complementar y no reemplazar a JavaScript, por lo que ¿cómo asegura el equipo que el futuro de JS siempre sea JS? <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

¿Cómo intenta el equipo de TypeScript evitar efectos negativos en el ecosistema de JS?

TypeScript's influence in the JavaScript ecosystem and its alignment with JavaScript's goals and principles. TypeScript's impact on the industry and its popularity among JavaScript programmers. The goal of TypeScript to innovate in types without introducing new concepts to JavaScript. The challenges of running TypeScript on other people's code and making it a native browser language. TypeScript's compatibility with JavaScript and its aim to be a thin layer on top of JavaScript. The efforts to improve support for JS and JS docs and the pain points of transitioning to TypeScript. The accessibility work in TypeScript and the absence of real competitors in the market.

Orta Therox

Muchos marcos de trabajo web modernos utilizan componentes como sus bloques de construcción. En esta charla, mostraré las pruebas de componentes utilizando Cypress, y cuando digo "mostrar", lo digo literalmente. Verás el componente ejecutándose dentro de un navegador real, interactuarás con el componente como un usuario real y podrás depurar el componente utilizando las herramientas de desarrollo del navegador real. Por último, repasaré las opciones actuales de código abierto y comerciales para probar visualmente los estilos y la representación del componente. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Veo lo que está sucediendo: Pruebas visuales para tus componentes

Gleb Akhmetov explains how to visually test React components, emphasizing the importance of addressing climate change and collaboration. He discusses component testing, styling, and the challenges of CSS changes. Gleb highlights the use of image snapshots for visual testing and the importance of controlling data for accurate results. He also discusses using Docker for consistent visual testing and the support for multiple browsers. Cypress is focused on flake-free testing and has plans for test retries and new features in the roadmap.

Gleb Bahmutov

En esta sesión, voy a compartir mi historia sobre cómo empecé a programar, cómo encuentro tiempo para trabajar en proyectos paralelos y cómo puedes crecer y avanzar en tu carrera. Después de esta charla, espero que te sientas inspirado/a para trabajar de manera más inteligente, formar nuevos hábitos y seguir esforzándote incluso cuando las cosas se desmoronen. Presentaré algunos consejos útiles sobre auto-motivación, gestión del tiempo, establecimiento de prioridades y metas, mantenerse organizado/a, creer en ti mismo/a y mantener un equilibrio entre tu carrera y tu vida personal. Además, en esta sesión, vamos a hablar sobre la formación del hábito de programar y los beneficios que conlleva. Vamos a explorar formas de encontrar mentores en tu trabajo y fuera de él, así como ampliar tu red social. Esta charla no se trata solo de mejorar en tu trabajo de 9 a 5, sino también de desarrollarte a ti mismo/a. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Cuando piensas que no hay tiempo para aprender o programar

This Talk discusses the speaker's coding journey, forming habits, and finding time for coding. The speaker recommends participating in the 100 days of code challenge and learning HTML, CSS, JavaScript, AngularJS, and D3.js. Building small projects and games is helpful for learning and growth. The importance of forming habits and overcoming resistance is emphasized, along with prioritizing consistency and focusing on details. Finding time is about reclaiming the 24 hours we all have and making small changes to accommodate coding. Keeping a log or notebook is important for tracking progress.

Eleftheria Batsou

En esta presentación, analizaremos el estado actual de Angular y su infraestructura de herramientas. Discutiremos qué características habilitaron la última versión de nuestro motor de renderizado Ivy y cómo puedes aprovecharlas hoy. En el camino, veremos el trabajo que hicimos para garantizar un tamaño de paquete pequeño y una ejecución rápida. En la segunda parte de la charla, nos centraremos en las herramientas que Angular proporciona para ayudarte a entregar aplicaciones de manera rápida y eficiente. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

El estado de Angular

This Talk provides an overview of Angular and its development stack, including the Component Development Kit (CDK) and UI components. It discusses the balance between static and dynamic systems and the benefits of using TypeScript. The Talk also highlights the evolution of Angular, version 10 updates, and the deployment of Angular Universal applications. It mentions the ease of updating Angular and the incorporation of web components. The future of frameworks, external contributions, and monorepo setups are also discussed.

Minko Gechev

La API de Composición es una de las mayores características nuevas en Vue 3. En esta charla, explicaré qué es y cómo utilizar la API de Composición para la abstracción y reutilización de código.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

API de Composición: una rápida visión general de Vue

The Talk introduces the composition API in Vue 3 as a better option for composing reusable features compared to mixins and scope slots. It explains how to abstract search functionality using the composition API and demonstrates the creation of searchQuery and searchResultsQuery objects. The Talk also covers running breed search in the mounted hook, sorting results using computed properties, and the benefits of the composition API in terms of code organization and reusability. It concludes by mentioning the upcoming release of Vue 3 and the advantages of the composition API.

Natalia Tepluhina

Estamos muy acostumbrados a generar resultados visuales con código, pero a menudo nos sorprende escuchar que también podemos crear música de la misma manera. ¿No lo sabías? No estás solo. Aunque la idea de programar música es más antigua que todos nosotros, este concepto aún es bastante desconocido para muchos desarrolladores. ¡Pero no por mucho tiempo! Vamos a arrojar algo de luz sobre la programación musical en nuestras aplicaciones web diarias utilizando Angular.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

¿Qué dice Angular? 🦊

Today's Talk is about using Angular, Web Audio API, and ToneJS to create custom sounds and instruments in a web application. The speaker demonstrates how to create an audio context, connect sources, and add filters to modify the sounds. They explore different elements in the ToneJS library, such as synthesizers, parts, noise, and audio tracks, to enhance the user experience. The Talk also showcases instruments that play cat and dog samples according to the pitch. Overall, it highlights the possibilities of using these technologies to create unique and interactive audio experiences in web applications.

Laura Silvanavičiūtė

Con las versiones anuales de ECMAScript (ES2015..ES2019) muchas cosas han cambiado en el mundo de JavaScript, y aún hay más por venir. Esta charla echa un vistazo a algunas de las características más nuevas (ES2020) y algunas de las próximas funcionalidades de ECMAScript, que esperamos se conviertan en parte de la Especificación del Lenguaje ECMAScript en un futuro cercano. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

ESNext: Propuestas a tener en cuenta

ES Next proposal stages include straw person, proposal, draft, candidate, and finished. Optional chaining and null coalescing operators are solutions for handling undefined and null values. Logical assignment and null coalescing operators are seeking advancement to stage four. Decimal type is introduced to address floating point math issues. Cancellation API and abort control are solutions for canceling promise execution. Pattern matching allows matching the shape of a vector and performing actions based on it.

Bramus Van Damme

En esta charla mostraré cómo podemos utilizar una combinación de GraphQL SDL junto con un nuevo DSL (GraphQL Transform) creado por el equipo de Amplify para construir una aplicación en la nube de pila completa directamente desde su esquema de GraphQL. Usando este DSL de GraphQL, recorreremos cómo modelar una base de datos, reglas de autorización, relaciones y patrones de acceso personalizados. Veremos cómo prototipar rápidamente una aplicación de ejemplo y ver algunas demostraciones, incluida una aplicación de votación capaz de manejar más de 100,000 operaciones por segundo.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Transformando GraphQL: Infraestructura como código para desarrolladores front-end

This talk is about building full-stack cloud applications as a front-end developer using GraphQL and the GraphQL Transform library. It covers the three main parts of AWS Amplify: hosting, CLI, and client libraries. The GraphQL Transform library simplifies building a GraphQL API by handling schema creation, database interaction, and resolver mapping. It demonstrates how to use GraphQL transforms to build a GraphQL API with features like authorization rules, relationships, and local mocking. It also discusses the considerations for using managed services and the future of infrastructure as code with Amplify and other tools.

Nader Dabit

¿Pasas horas desplazándote por TikTok, asombrado por los movimientos de baile extravagantes pero complicados de los jóvenes de hoy en día? Esos chicos están triunfando mientras tú te sientas a codificar consultas SQL. Afortunadamente, somos tecnólogos y no hay problema que no podamos resolver, incluido mejorar en el baile de TikTok. En esta charla, te mostraré cómo perfeccioné mis movimientos construyendo PoseDance, tu amigable entrenador de TikTok. Discutiremos cómo aproveché PoseNet, que te permite identificar el movimiento del cuerpo y dibujar un 'esqueleto' en un video. Combinado con una cámara web que mapea tu propio esqueleto de baile, un poco de matemáticas para comparar los puntos coincidentes, Azure Functions para autenticar a un usuario y PlayFab como backend amigable para juegos para mantener las puntuaciones y crear un ranking, tienes el pasatiempo perfecto para la cuarentena, haciendo el ridículo frente a una cámara web. ¡Ven a bailar conmigo! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

PoseDance: Construye un Entrenador de TikTok

In this Talk, Jen Looper introduces PoseDance, a TikTok trainer app that uses PoseNet for pose detection. She discusses the challenges of scoring and the potential for medical applications. Jen also mentions the use of Azure Functions and PlayFab for the app's backend and deployment. The Talk concludes with a code tour and an invitation for contributions to improve the scoring system.

Jen Looper

Con Hasura Remote Joins, puedes unir los datos de tu tabla con una API de Stripe o una API de Github o cualquier API de GraphQL. Sin escribir una sola línea de código. Utilizando el increíble sistema de tipos de GraphQL combinado con la configuración declarativa de Hasura, puedes crear relaciones entre tablas y otros servicios y obtener una API unificada hermosa. En una sola llamada, obtén todos los datos necesarios para construir tus aplicaciones desde cualquier parte del mundo. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Utilizando Remote Joins para crear una API GraphQL unificada para tu empresa

Hasura's remote joins feature allows you to combine multiple data sources into a unified GraphQL API, including Postgres databases, GraphQL APIs, and REST APIs. It enables joining data across different databases and integrating with external APIs like Stripe and Auth0. Hasura pushes down SQL to join data across databases and can even integrate with REST APIs using actions. With remote joins, you can query and fetch data from multiple sources, enriching your GraphQL schema and creating powerful data relationships.

Tanmai Gopal

Los conflictos clásicos de diseño entre frontend y backend API se están convirtiendo en una molestia del pasado con las arquitecturas y herramientas serverless y Jamstack; los desarrolladores frontend están construyendo el stack completo. Pero esto plantea un nuevo problema: "¿Qué base de datos? ¿A quién le importa la base de datos?" Esta charla te ayudará con las preguntas que debes hacerle a la base de datos para tu próximo proyecto paralelo... y un lugar para comenzar tu viaje en los entresijos de las bases de datos. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Cuando los Mundos Chocan: Frontend vs Base de Datos

Tyler Hannon discusses the importance of choosing the right database and explains the ACID acronym, which stands for Atomicity, Consistency, Isolation, and Durability. He also highlights the challenges and benefits of distributed transactions in Fullstack applications. Various approaches to solving database challenges are mentioned, with a focus on FAUNA and its CALVIN protocol. The goal is to have a fast, reliable, and serverless database that meets specific requirements.

Tyler Hannan

En esta charla, Pablo Postigo, co-fundador y CEO de Frontity, dará una introducción a los conceptos básicos del framework Frontity y hablará sobre los principales desafíos al desarrollar un front-end de React para un sitio de WordPress sin cabeza. Además, compartirá su visión sobre el futuro de JavaScript en el ecosistema de WordPress y la historia detrás de Frontity.<a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

Construyendo frontends de React para WordPress

Frontity is a framework that combines WordPress and React to create modern user experiences. It is easy to use, SEO-friendly, and extensible. The framework has achieved great results for publishers, increasing page views, organic traffic, and user acquisition. Frontity Pro has served millions of page views worldwide and provides a seamless content management experience. Visit frontity.org to learn more and join the community.

Pablo Postigo

Discover the future of the JavaScript development ecosystem and get connected to its stellar crowd! Attend JSNation Live, a 3-day conference on all things JS, gathering international software engineers in the cloud.

JSNation Live 2020

The biggest JS conference in the cloud

Available in other languages: