Name: JSNation Live 2021
Start: 2021-06-09T10:00:00.000Z
End: 2021-06-11T18:00:00.000Z

Vlad Dumitrica

Aleksei Podgaev

Varun

Joanna Otmianowska

Luis Oliveira

Mauro Bartolomeoli

Barbara Ferreira

Oscar Pagani

JDog

Denis Radin

Suzy Nakayama

Tami E.

Rishi Narang

Luca Fregoso

Hulya Karakaya

Tenice

Jumar Mundo

Robert

Osman Fikret Ceylan

Panos Dimitriadis

Jennifer Proust

Maksym Melnyk

Bruno Marques

Sachini Dissanayaka

Zain Fathoni

Collins Kipruto

 Pier Gorelli

KHANDAKER SULTANA

Isabelle Francis

Vladimir Nikonov

Robert H Glidden

Ivelin Iliev

Ricardo Del Rio Rubial

Vite es una nueva herramienta de construcción que pretende proporcionar un flujo de trabajo más delgado, rápido y sin fricciones para la construcción de aplicaciones web modernas. Esta charla se sumergirá en el trasfondo del proyecto, la justificación, los detalles técnicos y las decisiones de diseño: qué problema resuelve, qué lo hace rápido y cómo encaja en el panorama de las herramientas JS.

Vite: Repensando las Herramientas de Frontend

Vite is a next-generation build tool that leverages native ES modules for improved performance. It eliminates the need for bundling and improves hot module replacement. Vite provides an opinionated default configuration while still allowing advanced customization through plugins. It is framework agnostic and can be used for React and other applications. Vite is being adopted by Next.js and Create React App, and integration with Nuxt 3 offers significant speed improvements.

Vite is a new build tool that intends to provide a leaner, faster, and more friction-less workflow for building modern web apps. This talk will dive into the project's background, rationale, technical details and design decisions: what problem does it solve, what makes it fast, and how does it fit into the JS tooling landscape.

Vite: Rethinking Frontend Tooling

Evan You

JavaScript en el navegador se ejecuta muchas veces más rápido de lo que lo hacía hace dos décadas. Y eso sucedió porque los proveedores de navegadores pasaron ese tiempo trabajando en intensivas optimizaciones de rendimiento en sus motores JavaScript.Debido a este trabajo de optimización, JavaScript ahora se está ejecutando en muchos lugares además del navegador. Pero todavía hay algunos entornos donde los motores JS no pueden aplicar esas optimizaciones de la manera correcta para hacer las cosas rápidas.Estamos trabajando para resolver esto, comenzando una nueva ola de trabajo de optimización de JavaScript. Estamos mejorando el rendimiento de JavaScript para entornos completamente diferentes, donde se aplican reglas diferentes. Y esto es posible gracias a WebAssembly. En esta charla, explicaré cómo funciona todo esto y qué vendrá a continuación.

Haciendo JavaScript en WebAssembly Rápido

WebAssembly enables optimizing JavaScript performance for different environments by deploying the JavaScript engine as a portable WebAssembly module. By making JavaScript on WebAssembly fast, instances can be created for each request, reducing latency and security risks. Initialization and runtime phases can be improved with tools like Wiser and snapshotting, resulting in faster startup times. Optimizing JavaScript performance in WebAssembly can be achieved through techniques like ahead-of-time compilation and inline caching. WebAssembly usage is growing outside the web, offering benefits like isolation and portability. Build sizes and snapshotting in WebAssembly depend on the application, and more information can be found on the Mozilla Hacks website and Bike Reliance site.

JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.

Making JavaScript on WebAssembly Fast

Lin Clark

La neurotecnología es el uso de herramientas tecnológicas para entender más sobre el cerebro y permitir una conexión directa con el sistema nervioso. La investigación en este campo no es nueva, sin embargo, su accesibilidad para los desarrolladores de JavaScript sí lo es.En los últimos años, los sensores cerebrales se han puesto a disposición del público, con herramientas que hacen posible que los desarrolladores web experimenten construyendo interfaces controladas por el cerebro.A medida que esta tecnología evoluciona y desbloquea nuevas oportunidades, vamos a analizar uno de los últimos dispositivos disponibles, cómo funciona, las posibilidades que abre y cómo empezar a construir tu primera aplicación controlada por la mente usando JavaScript.

Construyendo Interfaces Controladas por el Cerebro en JavaScript

Learn how to build brain-controlled interfaces using JavaScript and brain sensors. Understand the functions of different parts of the brain and how they relate to sensor placement. Explore examples of calm and focus detection, as well as the Kinesis API for mental commands. Discover the applications of brain-controlled interfaces, such as scrolling web pages and password-less authentication. Understand the limits and opportunities of brain control and the potential for using brain sensors in medical applications.

Neurotechnology is the use of technological tools to understand more about the brain and enable a direct connection with the nervous system. Research in this space is not new, however, its accessibility to JavaScript developers is.Over the past few years, brain sensors have become available to the public, with tooling that makes it possible for web developers to experiment building brain-controlled interfaces.As this technology is evolving and unlocking new opportunities, let's look into one of the latest devices available, how it works, the possibilities it opens up, and how to get started building your first mind-controlled app using JavaScript.

Building Brain-controlled Interfaces in JavaScript

Charlie Gerard

Casi todos los desarrolladores piensan que agregar una línea de registro más no disminuiría el rendimiento de su servidor... ¡hasta que el registro se convierte en el mayor cuello de botella para sus sistemas! Creamos uno de los registradores JSON más rápidos para Node.js: pino. Una de nuestras decisiones clave fue eliminar todo el "transporte" a otro proceso (o infraestructura): redujo tanto el consumo de CPU como de memoria, eliminando cualquier cuello de botella del registro. Sin embargo, esto creó fricción y disminuyó la experiencia del desarrollador al usar Pino y los transportes en el proceso es la característica más solicitada por nuestro usuario.En la próxima versión 7, resolveremos este problema y aumentaremos el rendimiento al mismo tiempo: estamos introduciendo pino.transport() para iniciar un hilo de trabajo que puedes usar para transferir tus registros de forma segura a otros destinos, sin sacrificar ni el rendimiento ni la experiencia del desarrollador.

Registro Multihilo con Pino

Today's Talk is about logging with Pino, one of the fastest loggers for Node.js. Pino's speed and performance are achieved by avoiding expensive logging and optimizing event loop processing. It offers advanced features like async mode and distributed logging. The use of Worker Threads and Threadstream allows for efficient data processing. Pino.Transport enables log processing in a worker thread with various options for log destinations. The Talk concludes with a demonstration of logging output and an invitation to reach out for job opportunities.

Almost every developer thinks that adding one more log line would not decrease the performance of their server... until logging becomes the biggest bottleneck for their systems! We created one of the fastest JSON loggers for Node.js: pino. One of our key decisions was to remove all "transport" to another process (or infrastructure): it reduced both CPU and memory consumption, removing any bottleneck from logging. However, this created friction and lowered the developer experience of using Pino and in-process transports is the most asked feature our user.In the upcoming version 7, we will solve this problem and increase throughput at the same time: we are introducing pino.transport() to start a worker thread that you can use to transfer your logs safely to other destinations, without sacrificing neither performance nor the developer experience.

Multithreaded Logging with Pino

Matteo Collina

La forma en que escribimos JavaScript en 2030 será completamente diferente a como lo hacíamos en 2020. Aquí está el por qué: la lenta muerte de IE11 y el despliegue de los módulos ES convergerán hacia una nueva generación de herramientas de JavaScript. Estas herramientas son más rápidas, más seguras en cuanto a tipos y políglotas, lo que conduce a una mejor experiencia tanto para el desarrollador como para el usuario. ¡El cambio está en marcha!

La Tercera Edad de JavaScript

This talk presents the Third Age of JavaScript, covering the evolution and future of the language. It explores the adoption of ES modules and the decline of IE11, as well as the changing landscape of JavaScript tooling and the concept of polyglot tooling. The talk also touches on the potential future of JavaScript with WebAssembly and emphasizes the importance of code composability and receiving feedback in software development.

The way we write JavaScript in 2030 will be completely different than in 2020. Here's why: the slow death of IE11 and rollout of ES Modules will converge toward a new generation of JavaScript tooling. These tools are faster, typesafer, and polyglot, leading to both a better developer and user experience. Change is afoot!

The Third Age of JavaScript

Shawn Swyx Wang

Jecelyn compartirá algunos consejos y trucos para ayudarte a depurar tu aplicación web de manera efectiva con Chrome DevTools. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Depuración con Chrome DevTools

Here are some tips for better utilizing DevTools, including using the run command, customizing keyboard shortcuts, and emulating the focus effect. Learn how to inspect memory, use the network panel for more control over network requests, and take advantage of console utilities. Save frequently used code as snippets and use local overrides for easy editing. Optimize images by using a more optimized format like AVIF and track changes in the network panel to see the reduced data size.

Jecelyn will share some tips and tricks to help you debug your web app effectively with Chrome DevTools. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Debugging with Chrome DevTools

Jecelyn Yeen

¿Alguna vez trabajaste en una aplicación monolítica de Next.js? Yo sí, y escalar una gran aplicación de React para que muchos equipos puedan trabajar simultáneamente no es fácil. Con micro frontends, puedes dividir un monolito de frontend en piezas más pequeñas para que cada equipo pueda construir y desplegar de manera independiente. En este masterclass, aprenderás cómo construir grandes aplicaciones de React que escalen utilizando micro frontends. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Micro Frontends with Module Federation and React

Today's Microfrontend Workshop with Module Federation covers configuring module federation, creating boundaries between micro frontends, routing, soft navigation, and communication between micro frontends. The workshop focuses on building and refactoring micro frontends using React and Lerna. It explores module exposition, webpack configuration, dynamic imports, and shared libraries. Participants learn about versioning, mounting components in React, and implementing communication between micro frontends. The workshop also covers Next.js and Expo micro frontends, dynamic script loading, and the importance of creating explicit APIs for communication.

Did you ever work in a monolithic Next.js app? I did and scaling a large React app so that many teams can work simultaneously is not easy. With micro frontends you can break up a frontend monolith into smaller pieces so that each team can build and deploy independently. In this workshop you'll learn how to build large React apps that scale using micro frontends. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Alex Lobera

Deno 1.9 introdujo una nueva API de servidor web que aprovecha Hyper, una implementación rápida y correcta de HTTP para Rust. El uso de esta API en lugar de la implementación std/http aumenta el rendimiento y proporciona soporte para HTTP2. En este masterclass, aprende cómo crear un servidor web utilizando Hyper en el fondo y mejorar el rendimiento de tus aplicaciones web. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Construyendo un Servidor Web Hiper Rápido con Deno

The Workshop introduces Beano and Hyper, a JavaScript runtime and a Rust library known for its fast HTTP implementation. The benefits of using Rust and Hyper over the standard TypeScript implementation of HTTP are discussed. Load tests show that Hyper is about 35% faster. The process of building a web framework called Hyperbole is explained, along with the implementation of request handling logic and middleware. The use of Deno for libraries and production is explored, and the importance of load testing and optimization is emphasized.

Deno 1.9 introduced a new web server API that takes advantage of Hyper, a fast and correct HTTP implementation for Rust. Using this API instead of the std/http implementation increases performance and provides support for HTTP2. In this workshop, learn how to create a web server utilizing Hyper under the hood and boost the performance for your web apps. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building a Hyper Fast Web Server with Deno

Matt Landers

Will Johnston

Descubre cómo aprovechar el aprendizaje automático en JavaScript utilizando TensorFlow.js en el navegador y más allá en esta charla rápida. Inspírate a través de un montón de prototipos creativos que empujan los límites de lo que es posible en el navegador web moderno (las cosas han avanzado mucho) y luego da tus primeros pasos con el aprendizaje automático en minutos. Al final de la charla, todos entenderán cómo reconocer un objeto de su elección que luego se puede utilizar de cualquier manera creativa que puedas imaginar. Se asume familiaridad con JavaScript, pero no se requiere experiencia en aprendizaje automático. ¡Ven y da tus primeros pasos con TensorFlow.js!

TensorFlow.js 101: Aprendizaje automático en el navegador y más allá

JavaScript with TensorFlow.js allows for machine learning in various environments, enabling the creation of applications like augmented reality and sentiment analysis. TensorFlow.js offers pre-trained models for object detection, body segmentation, and face landmark detection. It also allows for 3D rendering and the combination of machine learning with WebGL. The integration of WebRTC and WebXR enables teleportation and enhanced communication. TensorFlow.js supports transfer learning through Teachable Machine and Cloud AutoML, and provides flexibility and performance benefits in the browser and Node.js environments.

Discover how to embrace machine learning in JavaScript using TensorFlow.js in the browser and beyond in this speedy talk. Get inspired through a whole bunch of creative prototypes that push the boundaries of what is possible in the modern web browser (things have come a long way) and then take your own first steps with machine learning in minutes. By the end of the talk everyone will understand how to recognize an object of their choice which could then be used in any creative way you can imagine. Familiarity with JavaScript is assumed, but no background in machine learning is required. Come take your first steps with TensorFlow.js!

TensorFlow.JS 101: ML in the Browser and Beyond

Jason Mayes

Comienza con los Componentes Web, que te permiten definir nuevos elementos HTML que funcionan en todas partes donde funciona el HTML regular. Esta charla se centrará en Lit, una suite de Google que te ayuda a crear Componentes Web con características que esperarías, como la vinculación de datos y definiciones declarativas. También se hablará de cómo los hemos utilizado para construir uno de los sitios más alegres de la web, el Rastreador de Santa de Google 🎅 <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Componentes Web, Lit y Santa 🎅

Web Components and the Lit library are introduced, highlighting their ability to create custom elements and replicate built-in components with different functionality. The use of semantic HTML and the benefits of web components in development are emphasized. The features of Lit, such as data binding and rendering, are discussed. The Santa Tracker is showcased as an example of web components being used in educational games. The compatibility of web components with other frameworks and their versatility in creating small widgets or large applications are highlighted.

Get started with Web Components – enabling you to define new HTML elements that work everywhere regular HTML does. This talk will focus on Lit, a suite from Google that helps you create WCs with features you'd expect like data-binding and declarative definitions. It'll also cover how we've used them to build one of the web's jolliest sites, Google's Santa Tracker 🎅 <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Web Components, Lit and Santa 🎅

Sam Thorogood

Un vistazo a las características más geniales y menos conocidas de Pixi.js.Incluyendo tratamientos como:- Mallas- Animación Spine- Filtros personalizados- Texturas de renderizado y exportación de imágenes Mostrando ejemplos de cómo puede hacer que trabajar con WebGL sea súper fácil y darle a tu contenido esa ventaja que necesita para destacar. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

¡Potenciadores de Pixi!

Pixie is a powerful tool for creating scenes and effects in software development. It supports features like texture mapping, Spine animation, and filters for creating cool effects. The talk also covers the use of render textures to capture and download images, as well as the importance of communication and a positive attitude in software development. The speaker shares their journey into coding and discusses the potential for porting Unity games to JavaScript using technologies like web GL and web GPU.

A look into Pixi.js coolest and lesser known features.Including treats such as:- Meshes- Spine Animation- Custom filters- Render Textures and Image exporting Showing example how it can make working with WebGL super easy and give your content that edge it needs to stand out! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Pixi Powerups!

Mat Groves

¡Espera! ¡No tan rápido - Deja de desplazarte y quédate un rato conmigo! Cuando se hace correctamente, las animaciones basadas en el desplazamiento pueden agregar pulido a un sitio y hacer que la narración en línea se sienta más inmersiva. ScrollTrigger de GreenSock te permite lograr animaciones suaves basadas en el desplazamiento con un código mínimo. Vamos a explorar juntos algunas de sus características.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Sigue Desplazándote

Scroll animations can enhance user experience when done properly, but should not distract from important information. CSS, JavaScript, and plugins like Scroll Trigger can be used to achieve scroll animations. GreenSock's ScrollTrigger provides a powerful JavaScript animation library for more complex animations. It is important to consider accessibility and provide reduced motion fallbacks. CodePen and GreenSock's documentation are valuable resources for learning and inspiration in creative coding.

Wait! Not so fast - Stop scrolling and hang out with me for a while! When done right, scroll based animations can add polish to a site, and make online storytelling feel more immersive. GreenSock's ScrollTrigger enables you to achieve buttery smooth scroll based animations with minimal code. Let's dig in to some of it's features together. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Keep Scrolling

Cassie Evans

La autenticación y autorización son problemas serios. A menudo dedicamos mucho tiempo a crear APIs poderosas pero pasamos por alto las medidas de seguridad adecuadas. Vamos a resolverlo con Magic utilizando una solución de identidad basada en claves sobre el estándar DID, donde las identidades de los usuarios son soberanas y se aprovechan de los pares de claves públicas y privadas de la cadena de bloques. En esta charla, veremos las formas adecuadas de asegurar nuestras APIs de Node.js con Tokens de Identidad Descentralizados. Pasaremos desde aprender qué son los estándares de Identidad Descentralizada, cómo las identidades de los usuarios son soberanas y se aprovechan de los pares de claves públicas y privadas de la cadena de bloques, por qué son el futuro de la seguridad de las APIs, y para poner en práctica la teoría construiremos una implementación real utilizando Node.js donde mostraré las mejores prácticas comunes. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Asegurando APIs de Node.js con Tokens de Identidad Descentralizados

This talk introduces the concept of securing a Node.js API using a decentralized identity token. The token is encoded as a Base64 string and consists of a proof and claim. The API is built using Express and protected using Magic. The application has multiple routes, with the secret route being protected by middleware. The authorization header is checked and the DID token is validated for access to protected routes.

Authentication and Authorization are serious problems. We often dedicate a lot of time to craft powerful APIs but overlook proper security measures. Let's solve it with Magic using a key-based identity solution built on top of DID standard, where users’ identities are self-sovereign leveraging blockchain public-private key pairs. In this talk, we’ll look at proper ways to secure our Node.js APIs with Decentralised Identity Tokens. We’ll go from learning what Decentralised Identity standards are, how the users’ identities are self-sovereign leveraging blockchain public-private key pairs, why they’re the future of API security, and to put theory into practice we will build a real-world implementation using Node.js where I’ll show common best practices. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Securing Node.js APIs with Decentralised Identity Tokens

Mohammad Shahbaz Alam

Desde hace casi 25 años, los desarrolladores de JavaScript han sufrido a manos del tiempo: el objeto Date. Hemos intentado todo tipo de soluciones, desde el uso de bibliotecas populares como Moment.js hasta el manejo de fechas y horas en el backend.Ahora es el momento de mostrarle al "tiempo" quién manda. Con la API Temporal estable en la Etapa 3 y el polyfill listo para su uso en producción, permíteme mostrarte cómo aprovechar el poder de esta maravillosa API para construir aplicaciones JavaScript potentes que manejen fechas y horas como siempre quisimos. También discutiremos las características ortogonales que se están trabajando en la API JavaScript Intl y descubriremos cómo se complementan entre sí y se unen para formar un conjunto completo de APIs que nos permiten construir componentes de fecha y hora de última generación en nuestras aplicaciones. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Cómo superar al tiempo: Construyendo aplicaciones JavaScript futuristas utilizando Temporal

Temporal is a proposal in JavaScript that brings an ergonomic API for building futuristic JavaScript applications. It is now at stage 3 and implementers will start implementing it in different polyfills and browsers. Temporal includes classes for working with dates, times, time zones, calendars, and durations. The talk covers building an invoice calculator using Temporal, calculating durations between date times, creating and manipulating durations, understanding time relativity and rounding, and rewriting methods using Temporal. The speaker expresses gratitude to various contributors and provides a sandbox for exploration.

For close to 25 years now, JavaScript developers have suffered at the hands of time: the Date object. We have tried all sorts of solutions from using popular libraries like Moment.js all the way to handling dates and times on the backend.Now it's time to show "time" who is boss. With the Temporal API stable at Stage 3 and the polyfill ready for production use, let me show you how to harness the power of this delightful API in order to build powerful JavaScript applications that handle dates and times like we always wished we could. We shall also discuss the orthogonal features being worked on in the JavaScript Intl API and find out how these play along with each other and come together to form a comprehensive set of APIs that allow us to build state of the art date and time components in our applications. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to Outsmart Time: Building Futuristic JavaScript Apps Using Temporal

Ujjwal Sharma

Cada vez más empresas eligen Microfrontends. Sin embargo, no son fáciles de implementar. Afortunadamente, Module Federation introducido con webpack 5 ha iniciado un cambio crucial de dirección. En este masterclass interactivo, aprenderás de Manfred Steyer, Angular GDE y Colaborador de Confianza en el equipo de Angular, cómo planificar e implementar arquitecturas de Microfrontend con Angular y el nuevo Module Federation de webpack. Hablaremos sobre compartir bibliotecas y conceptos avanzados como manejar desajustes de versión, Module Federation dinámico e integración en monorepos. Después de los ejercicios individuales, tendrás un estudio de caso que podrás utilizar como plantilla para tus proyectos. Este masterclass te ayuda a evaluar las opciones individuales para tus proyectos. Prerrequisitos:Debes tener algo de experiencia con Angular. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Microfrontends con Module Federation y Angular

Microfrontends with module federation allow teams to develop and deploy separate parts of a system, simplifying integration into a common shell. Webpack 5 Module Federation solves the issue of loading separately compiled source code for microfrontends. Version mismatches in module federation can be handled using strategies and semantic versioning. Angular can be combined with module federation using a custom builder. Microfrontends can share data and libraries, and web components can be used to wrap and render components from different versions or frameworks. Module federation allows for version negotiation and runtime loading of microfrontends. React.js can be integrated with module federation, and web components can be used to share libraries across different applications. The bootstrap method and web components wrapper simplify the process of bootstrapping Angular applications and loading web components on demand.

Ever more companies are choosing Micro-Frontends. However, they are anything but easy to implement. Fortunately, Module Federation introduced with webpack 5 has initiated a crucial change of direction. In this interactive workshop, you will learn from Manfred Steyer -- Angular GDE and Trusted Collaborator in the Angular team -- how to plan and implement Micro-Frontend architectures with Angular and the brand new webpack Module Federation. We talk about sharing libraries and advanced concepts like dealing with version mismatches, dynamic Module Federation, and integration into monorepos. After the individual exercises, you will have a case study you can use as a template for your projects. This workshop helps you evaluate the individual options for your projects. Prerequisites:You should have some experience with Angular. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Micro-Frontends with Module Federation and Angular

Manfred Steyer

¿Cómo depuras tan fácilmente en VS Code? ¿Cómo funcionan los codespaces? ¿Cuáles son esas combinaciones de teclas para editar código tan rápidamente? ¿Qué extensiones son las que no debería codificar sin ellas? Prepárate para empezar a toda velocidad en esta charla llena de demostraciones que te llevará a través de algunos de los mejores y más efectivos consejos y trucos en VS Code. Aprende cómo configurar tu entorno y personalizarlo a tu gusto. Saldrás con varios consejos sobre cómo ser más eficiente con una de las herramientas más populares en la web hoy en día! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

¡VS Code puede hacer eso!

The Talk covers various tips and features of using VS Code, including the command palette, Zen mode, external terminals, and debugging. It also highlights advanced editing and refactoring features, Git integration, and the use of dev containers. The speaker demonstrates how to set up a dev container for a Python app, run code in a container, and create and configure dev containers. The benefits of using dev containers are also discussed, such as eliminating manual configuration, handling dependencies, and facilitating team-based development.

How do you debug so easily in VS Code? How do codespaces work? What are those key combinations to edit code so quickly? What extensions are the ones I shouldn't code without? Get ready to hit the ground running in this fast-paced, demo-heavy talk that takes you through some of the best and most effective tips and tricks in VS Code. Learn how to setup your environment and customize it the way you like it. You'll walk out with several tips on how to be more efficient with one of the hottest tools on the Web today! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

VS Code Can Do That!

John Papa

CSS ha evolucionado y crecido enormemente desde que se introdujo por primera vez en 1996. Hubo un tiempo en aquel entonces en el que CSS ni siquiera estaba destinado a hacer diseños, pero ese tiempo ya pasó. Hoy en día, los diseños web son prácticamente sinónimo de CSS. Además de eso, CSS ahora se puede utilizar para construir cosas que antes solo eran posibles con JavaScript. Esta charla mostrará algunas de esas características y explicará cómo construirlas tú mismo. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

CSS También Puede Hacer Eso

This Talk is about CSS techniques that can simplify web development and eliminate the need for JavaScript. It covers topics such as responsive typography, flexible font sizing, CSS math functions, scroll snapping, sticky elements, and CSS masonry layout. The speaker emphasizes the importance of understanding how sticky elements work and highlights the potential bugs that can occur. CSS Masonry layout is discussed as a native solution for creating masonry grids in the browser. Overall, CSS provides flexible solutions for web styling and is an exciting tool for developers.

CSS has evolved and grown immensely since it was first introduced back in 1996. There was a time back then when CSS was not even meant for doing layouts, but that time has long past. Today, web layouts are practically synonymous with CSS. In addition to that, CSS can now be used to build things that used to only be feasible with Javascript. This talk will showcase a few of such features and explain how to build them yourself. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

CSS Can Do That Too

Chen Hui Jing

Si tu empresa es como las que he trabajado, tienes aplicaciones con siete diseños de botones diferentes, tres datepickers diferentes y una extraña colección de dropdowns que pueden o no ser accesibles. Una tendencia creciente para lidiar con esta inconsistencia es construir un sistema de diseño personalizado o una biblioteca de componentes. Básicamente, construyes La Única Forma™ de crear un datepicker para tu organización y pides al resto de tu empresa que se ajuste a tu nuevo sistema. Pero construir una biblioteca de componentes viene con muchos desafíos, como, ¿qué frameworks o bibliotecas deberías usar (si es que alguna)? ¿Cómo te aseguras de que tus componentes sean accesibles? ¿Y cómo distribuyes tus componentes para que toda tu empresa los pueda usar? En esta charla relámpago aprenderás cómo construir una biblioteca de componentes rápidamente basándote en una biblioteca como Kendo UI. Aprenderás consejos y trucos sobre cómo empezar y ejecutar, cómo personalizar componentes y cómo distribuir componentes en toda tu organización.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Construyendo una Biblioteca de Componentes Personalizada - Rápido

Today, I want to talk to you about building custom component libraries fast. Every company should have its own standard set of UI controls for consistency in design, technology, and accessibility. Companies shouldn't build the harder parts of those libraries themselves, such as date pickers and data grids. But as a software developer, your time is valuable. Building custom component libraries is a better use of your time than reinventing the wheel.

If your company is anything like the ones I’ve worked for, you have apps with seven different button designs, three different datepickers, and a bizarre collection of dropdowns that may or may not be accessible. A growing trend to deal with this inconsistency is to build a custom design system or component library. Essentially, you build The One Way™ to create a datepicker for your organization, and ask that the rest of your company to conform to your new system. But building a component library comes with a lot of challenges, like, which frameworks or libraries should you use (if any)? How do you make sure your components are accessible? And how to you distribute your components so your whole company can use them? In this lightning talk you’ll learn how to build a component library fast building on top of a library like Kendo UI. You’ll learn tips &amp; tricks on how to get up and running, how to customize components, and how to distribute components throughout your organization. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building a Custom Component Library – Fast

TJ VanToll

Con tantas bibliotecas para elegir para la gestión del estado, ¿por qué no agregar una más? La API Proxy de ECMAScript te permite interceptar y redefinir cómo opera un objeto. ¡Vamos a explorar cómo podrías utilizar la API Proxy para la gestión del estado!<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Utilizando la API Proxy para la Gestión del Estado

This Talk introduces the concept of using proxies in JavaScript for state management. It explores the implementation of proxies, observing properties and creating caches, building the proxy, and observing changes with proxies. The Talk also discusses using the Taits library for state management and the performance implications of proxies. TypeScript and JavaScript are compared, and the results of a poll on their usage are shared.

With so many libraries to choose from for state management, why not add one more? The ECMAScript Proxy API enables you to intercept and redefine how an object operates. Let's explore how you might use the Proxy API for state management! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Using the Proxy API for State Management

Los desarrolladores quieren lanzar y crear valor para nuestros usuarios. Entonces, ¿por qué tantos equipos luchan por llevar las cosas a producción rápidamente? En esta charla, Jason Lengstorf analizará el impacto que nuestra arquitectura y nuestra infraestructura frontend tienen en la capacidad de nuestros equipos para construir, iterar y desplegar software, y cómo afecta la calidad y los riesgos del despliegue. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Cómo la Arquitectura y la Infraestructura Pueden Mejorar (o Romper) la Productividad de tu Equipo

Today's Talk discusses how architecture and infrastructure choices impact team productivity. Complex systems can lead to frustration, fragility, and slowness, hindering efficiency and creating knowledge silos. Decoupled front-ends, pre-compiled front-ends, and serverless functions can improve productivity and enable faster deployment. Supportive architectures are crucial for building a shipping culture and avoiding frustrating, fragile, and slow systems.

Developers want to ship and create value for our users. Why, then, do so many teams struggle with getting things to production quickly? In this talk, Jason Lengstorf will look at the impact our frontend architecture and infrastructure has on our teams’ ability to build, iterate, and deploy software — and how it affects the quality and risks of deployment. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How Your Architecture and Infrastructure Can Make (or Break) Your Team’s Productivity

Jason Lengstorf

¿Cuáles son los beneficios de convertirse en un Intérprete de élite? La respuesta puede ser complicada. Únete a mí hoy para un breve viaje para acelerar la calidad del código con las métricas de DORA de Google y la mejora continua del código para impulsar una mayor entrega de software y rendimiento del equipo. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Acelerando la calidad del código con las métricas de DORA

This Talk discusses the Dora Metrics and their relation to continuous code improvement. High and elite performers deploy more frequently and have a lower change failure rate. Continuous code improvement involves identifying and fixing bugs in real time. Rollbar is a continuous code improvement platform that provides visibility into actionable errors. It helps organizations reduce the risk of losing customers and optimize developer productivity. Rollbar's unique error fingerprints and advanced features enable a deeper understanding of issues and faster resolution.

What are the benefits of becoming an Elite Performer? The answer can be complicated. Join me today for a short journey to accelerate code quality with Google's DORA metrics &amp; continuous code improvement to drive higher software delivery and team performance. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Accelerating Code Quality with DORA Metrics

Nico Krüger

Aprende cómo NodeSource fortalece su ventaja competitiva construyendo su producto en InfluxDB para obtener una mayor visibilidad en las aplicaciones de producción y presenta una mejor monitorización de seguridad y alertas en su solución.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Simplificando la Complejidad de Node.js con InfluxDB

NodeSource's NSolid simplifies Node.js for Windows DB and provides analytics, diagnostics, and security. InfluxDB is used for data aggregation and real-time monitoring, with a three-second latency sampling mechanism. Challenges with Utility Influx are faced, but InfluxDB handles large amounts of data and is easy to test and debug. Ensolve is recommended for production to benefit from insights, security, and diagnostics.

Learn how NodeSource strengthens their competitive advantage building their product on InfluxDB to increased visibility into production applications and presents better security monitoring and alerts into their solution. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Simplifying the Complexity of Node.js with InfluxDB

Marian Villa

Aprende cómo el modelado de estado con máquinas de estado y statecharts puede mejorar la forma en que desarrollas la lógica de la aplicación, y obtén un adelanto de herramientas visuales nunca antes vistas que llevarán la gestión de estado al siguiente nivel.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

El Futuro Visual de la Gestión de Estado

This talk discusses the visual future of state management and the use of state machines and state charts. XState is introduced as a state machine and state chart library for JavaScript, providing a clean and visualizable way to represent state machines. The talk highlights the features of XState, such as its state-first approach and utilities for interpreting the machine as a service. It also mentions the future goals of XState, including visualization, testing, analytics, and the development of a visual software modeling suite called Stately.

Learn about state modeling with state machines and statecharts can improve the way you develop application logic, and get a sneak peek of never-before-seen upcoming visual tools that will take state management to the next level. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Visual Future of State Management

David Khourshid

Los service workers brindan nuevas capacidades increíbles a la web. Hacen posible aplicaciones web completamente sin conexión, mejoran el rendimiento y aportan más resistencia y estabilidad a cualquier sitio. En esta charla, aprenderás cómo funcionan estos ataques de intermediario en tu propio sitio, diferentes enfoques que puedes utilizar y cómo podrían reemplazar muchas de nuestras mejores prácticas actuales. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Service Workers: Cómo realizar un ataque de intermediario en tu propio sitio por diversión y beneficio

Service workers provide resilience and make sites faster by intercepting requests and responses, caching assets, and providing fallbacks. They can be used to show critical information when a site goes offline, cache pages for offline access, and improve performance. Service workers can also be used to build multi-page apps with more resilience and less complexity. Caching API responses and gradually adding more complex features are recommended when adopting service workers. Single-page apps are not always the best choice, and different approaches fit different use cases.

Service workers bring amazing new capabilities to the web. They make fully offline web apps possible, improve performance, and bring more resilience and stability to any site. In this talk, you'll learn how these man-in-the-middle attacks on your own site work, different approaches you can use, and how they might replace many of our current best practices. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Service Workers: How to Run a Man-in-the-middle Attack on Your Own Site for Fun and Profit

Chris Ferdinandi

En esta charla exploraremos los grandes beneficios de descomponer una gran aplicación moderna en piezas significativas e independientes, cada una de las cuales puede ser construida, desplegada y cargada por separado. Discutiremos las mejores prácticas y los problemas comunes al intentar aplicar este patrón similar a los microservicios en el caótico mundo del navegador, y veremos cómo construir las piezas adecuadas garantiza un futuro más brillante para tus aplicaciones. Sumergámonos en la historia interminable de la arquitectura moderna del front-end.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Microscopios: Cómo construir una aplicación moderna modular en un mundo de paquetes

This Talk discusses the importance of bundling code in the modern JavaScript world and introduces Webpack as the de facto standard for bundling modules. It explores techniques such as code splitting, multiple entry points, and controlling the build process to optimize code organization and improve performance. The Talk also delves into concepts like Universal Model Definition (UMD) and using externals in Webpack to avoid code duplication. It highlights the benefits of separating and maintaining code in an application, as well as the use of micro-frontends and monorepos for scalability and collaboration. Overall, the Talk emphasizes the significance of code separation, dependency management, and efficient bundling strategies for developing robust and modular applications.

In this talk we will explore the great benefits of breaking a big modern app to meaningful, independent pieces – each can be built, deployed and loaded separately. We will discuss best practices and gotchas when trying to apply this microservice-like pattern to the chaotic world of the browser, and we'll see how building the right pieces guarantees a brighter future for your apps. Let's dive into Neverendering story of modern front-end architecture. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Micro-scopes – How to Build a Modular Modern App in a Bundled World

Liad Yosef

ReTool es una herramienta de front-end como servicio que es similar a React y puede ser 10 veces más rápido que codificar una aplicación web desde cero. Nos centraremos en cómo y por qué se utiliza para herramientas internas en algunas de las empresas de más rápido crecimiento y dedicaremos un minuto a explicar cómo funciona, dónde encaja bien y dónde no. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Cómo codificar aplicaciones internas aburridas 10 veces más rápido

ReTool is a platform that focuses on building internal tools quickly. It offers easy integrations with databases and APIs, supports custom React components and JavaScript libraries, and provides extensive support and deployment options. Developers can try it out at retool.com.

Retool is a front-end as a service tool that is similar to React and can be 10x faster than coding a web app from scratch. We’ll focus on how and why it is used for internal tools at some of the fastest growing companies and take a minute to walk through how it works, where it’s a good fit and where it’s not. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to Code Boring Internal Apps 10x Faster

Chris Smith

¿Has querido explorar la IA, pero no has querido aprender Python para hacerlo? ¡Tensorflow.js te permite usar IA y aprendizaje profundo en javascript, sin necesidad de Python! Veremos las diferentes tareas que la IA puede ayudar a resolver y cómo usar Tensorflow.js para resolverlas. No necesitas saber nada de IA para empezar, comenzaremos desde lo básico, pero aún así podremos ver algunas demos interesantes, porque Tensorflow.js tiene muchas funcionalidades y modelos preconstruidos que puedes usar en el servidor o en el navegador. Después de este masterclass, deberías ser capaz de configurar y ejecutar modelos preconstruidos de Tensorflow.js, o comenzar a escribir y entrenar tus propios modelos con tus propios datos. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Introducción a la IA para Desarrolladores de JavaScript con Tensorflow.js

This workshop provides an introduction to AI for JavaScript developers using TensorFlow.js. It explores deep learning, its APIs and capabilities, and the benefits of using TensorFlow.js. The workshop covers topics such as representing data as numbers, GPU acceleration, creating tensors and training neural networks, using pre-existing models, and using a KNN classifier for image classification. It also discusses other techniques for tabular data, converting and loading models with Python, and different types of networks. Overall, this workshop aims to empower JavaScript developers to leverage AI in their projects using TensorFlow.js.

Have you wanted to explore AI, but didn't want to learn Python to do it? Tensorflow.js lets you use AI and deep learning in javascript – no python required! We'll take a look at the different tasks AI can help solve, and how to use Tensorflow.js to solve them. You don't need to know any AI to get started - we'll start with the basics, but we'll still be able to see some neat demos, because Tensorflow.js has a bunch of functionality and pre-built models that you can use on the server or in the browser. After this workshop, you should be able to set up and run pre-built Tensorflow.js models, or begin to write and train your own models on your own data. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Intro to AI for JavaScript Developers with Tensorflow.js

Chris Achard

¿Cuánto tiempo llevamos viendo películas sobre la realidad y lo emocionante que se ve! Es posible que no te hayas dado cuenta, pero la realidad virtual ya está en nuestras vidas, incluso en nuestros navegadores. Cada vez hay más formas de aplicar estas tecnologías. Echemos un vistazo a la RV y RA y veamos cómo se ven en la vida real.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

¡Expandamos la Realidad!

I work as a front-end developer with experience in 3D tasks using WebGL and 3DS framework. Let's explore virtual reality and WebXR, which allows full immersion in a digital environment. In VR, we can explore virtual worlds, move and rotate within them, interact with objects, and even use VR for education. AR, augmented reality, is different from VR as it allows you to see the real world while also overlaying virtual objects. XR reality encompasses both VR and AR, and it's already a standard with good browser support.

How long have we been watching movies about reality and how exciting it looks! You may not have noticed, but virtual reality is already in our lives, even in our browsers. There are more and more ways to apply these technologies. Let's take a look at VR and AR and see how they look in real life. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Let's Expand the Reality!

Vasilika Klimova

Tanto los desarrolladores experimentados como los principiantes tienen la costumbre de saltar directamente a un framework o nueva tecnología que promete mucho, pero que también pasa por alto fundamentos importantes que, sin ellos, tienden a limitar el potencial de un sitio web o aplicación. Sin un conocimiento básico de HTML, podrías excluir involuntariamente a personas de conocer tu empresa a través de tu sitio web debido a una mala accesibilidad. Si no comprendes o simplemente tienes miedo de CSS, es más probable que agregues bibliotecas innecesarias encima de otras bibliotecas que solo aumentan el peso de la página, lo que afecta la velocidad de carga de tu aplicación. En esta charla, repasaremos algunas estrategias básicas de HTML y CSS que se pueden utilizar de inmediato junto con JavaScript, incluidos frameworks como React y Vue, que proporcionarán una serie de beneficios adicionales, como una mejor accesibilidad, un código más simple y formas de mejorar el SEO para que los motores de búsqueda como Google puedan comprender más fácilmente de qué trata tu página.

Deja de usar Javascript: Mejora tus habilidades con los fundamentos del desarrollo web

This Talk provides insights into web development fundamentals and the challenges faced in React setup. It emphasizes the importance of building a strong foundation with HTML and CSS, and highlights the significance of SEO and accessibility in website development. The Talk also discusses the value of HTML, lists, and simplicity in coding. Overall, it offers practical advice for developers to level up their skills in web development.

Seasoned and beginner alike, developers have a habit of jumping right into a framework or new technology that makes a lot of promises while also glazing over important fundamentals that without, tend to hold back a website or application’s potential. Without some basic knowledge of HTML, you might inadvertently exclude people from learning about your company through your website due to poor accessibility. Lacking an understanding or simply being afraid of CSS, you might be more prone to add unnecessary libraries on top of libraries that just add to the weight of the page, impacting how quickly your app can load. In this talk, we’ll go over some basic HTML and CSS strategies that can immediately be used right alongside of JavaScript including frameworks like React and Vue that will provide another range of benefits like better accessibility, simpler code, and ways you can improve SEO letting search engines like Google more easily figure out what your page is about.

JSNation Live 2021

The biggest JS conference in the cloud