Controlando aplicaciones con tu mente y AI

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

¿Cuál es el futuro de las interacciones de usuario? ¿Seguiremos utilizando la web y el móvil o nos cambiaremos completamente a la realidad virtual y aumentada? ¿Cuál es nuestra experiencia de usuario actual en la web y el móvil y cómo cambiará cuando el mundo digital se conecte con nuevas dimensiones? ¿Seguiremos utilizando el teclado y el ratón o los gestos o utilizaremos algo diferente? En esta charla, echaremos un vistazo al futuro donde controlaremos aplicaciones con nuestros pensamientos. Literalmente. No es un experimento mental, sino un viaje a través de nuestras ondas cerebrales con un casco EEG de consumo. Exploraremos cómo podemos utilizarlos y la inteligencia artificial para crear experiencias futuristas, que sentarán las bases de nuestras interacciones futuras con el mundo digital.

This talk has been presented at React Summit Remote Edition 2020, check out the latest edition of this React Conference.

FAQ

Vladimir Novik es un arquitecto de software y consultor en Vladimir Novik Labs, Google Developer Expert, autor e ingeniero especializado en web, móvil, VR, AR, IoT y AI. Además, es CTO y co-fundador de EventLoop.

EventLoop es una plataforma co-fundada por Vladimir Novik que ofrece un conjunto de herramientas y complementos para organizar y asistir a conferencias en línea, proporcionando una alternativa robusta y eficiente a sistemas como Zoom.

Puedes colaborar con EventLoop registrándote en su producto Alpha, que es de código abierto. Para más información, puedes visitar eventloop.ai o seguirlos en Twitter en eventloopHQ.

Vladimir Novik menciona varias tecnologías emergentes como la computación cuántica, la realidad virtual (VR) y la realidad aumentada (AR), destacando su creciente impulso en el panorama tecnológico actual.

Vladimir Novik explica que se puede medir la actividad cerebral utilizando auriculares EEG, que miden los cambios potenciales mediante electrodos situados en el cráneo. Estos dispositivos pueden conectarse a través de Bluetooth, y permiten visualizar y analizar las ondas cerebrales.

Novik sugiere la creación de interacciones más realistas en entornos de realidad virtual y aumentada, moviéndose más allá de los enfoques tradicionales 2D para adoptar interacciones que imiten acciones y elementos del mundo real.

En la demostración de Vladimir, las ondas cerebrales se usan para interactuar con dispositivos digitales, como seleccionar opciones en una aplicación o incluso controlar un dron, mediante el uso de algoritmos de aprendizaje automático que clasifican los patrones de las ondas cerebrales.

Vladimir Novick
Vladimir Novick
25 min
02 Aug, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Esta charla explora el control de aplicaciones con la mente y el futuro de la interfaz de usuario y la experiencia de usuario. Se discute la integración de la realidad virtual y aumentada en la interfaz de usuario y la experiencia de usuario, la comprensión de las neuronas y los cascos EEG, la conexión a Muse a través de Bluetooth, la medición de las ondas cerebrales y la detección de parpadeo, la alimentación de datos al aprendizaje automático y el control mental con la realidad aumentada. El ponente enfatiza la importancia de aprender React Native, realidad aumentada, React, Bluetooth y drones para aquellos interesados en explorar estos temas.

1. Introducción a Controlar Aplicaciones con tu Mente

Short description:

Hola a todos. Hoy quiero hablar sobre controlar aplicaciones con tu mente y el futuro de la UI y UX. Estamos en una fase de transición, explorando nuevos horizontes y dimensiones. Tenemos la capacidad de adaptarnos y transformar las cosas en algo completamente diferente. Los fundamentos de la UI y UX se basan en un medio 2D, aunque tenemos elementos falsos en 3D.

Hola a todos. Estoy muy emocionado de estar aquí en la edición remota de React Summit, transmitiendo desde el espacio exterior. Y hoy quiero hablar sobre controlar aplicaciones con tu mente. Mi nombre es Vladimir Novik, soy arquitecto de software y consultor en Vladimir Novik Labs. Soy Google Developer Expert, autor, ingeniero y a diario trabajo en los campos de web, móvil, VR, AR, IoT y AI.

También soy CTO y co-fundador de EventLoop, y estamos creando una experiencia de conferencia en línea robusta, eficiente y con muchas funciones. Básicamente, en lugar de tener Zoom para tu conferencia virtual, te ofrecemos un conjunto de herramientas de conferencia y diferentes complementos y widgets, etc., que te ayudan a organizar y asistir a la conferencia. Así que si eres organizador, orador o asistente y te pones en contacto con nosotros y te registras en nuestro producto Alpha, será un producto de código abierto. Así que si quieres colaborar, eres bienvenido. Puedes encontrarnos en eventloop.ai o en Twitter en eventloopHQ.

Hoy quiero hablar sobre el futuro. Y creo que estamos en una especie de fase de transición tecnológica. Cuando estamos explorando nuevos horizontes, exploramos nuevos medios, tenemos VR, AR, realidad mixta, web, móvil. Todo está cambiando constantemente. Y por eso somos los que rompemos las reglas para crear nuevas. Pensemos en qué medio usaremos en el futuro. ¿Qué dimensiones usaremos? ¿Quizás VR? ¿Quizás AR? ¿Quizás algo diferente? Solo estoy pensando en voz alta, pero la computación cuántica está ganando impulso, VR está ganando impulso, AR está ganando impulso. Todo está cambiando. ¿Qué dimensiones usaremos? ¿Habrá web como la conocemos hoy o móvil o cambiaremos completamente a un medio diferente? ¿Cómo debemos prepararnos para esa transición? ¿Cómo debemos adaptarnos? ¿Debemos adaptarnos o debemos realmente romper los fundamentos que tenemos? ¿Quizás inventar nuevas técnicas para manipular las cosas, interactuar de manera diferente? ¿Quizás nuevos patrones de UX, quizás nuevas mejores prácticas?

Así que tenemos esta capacidad ahora mismo de cambiar las cosas, de adaptarnos y transformarlas en algo completamente diferente. Y hablemos de cuáles son los fundamentos mismos de la UI y cuáles son los fundamentos mismos de la UX. Y creo que es un medio 2D. Y si piensas en eso, hemos recorrido un largo camino desde los dibujos en las cuevas hasta las aplicaciones móviles. Pero si piensas en toda la teoría del color y las líneas y la historia del arte y cómo todo creó los fundamentos del diseño y todo en nuestras pantallas es básicamente un medio 2D. Porque somos falsos 3D. Tercera dimensión. No es realmente como la tercera dimensión. Tenemos modelos 3D en el navegador o en auriculares o donde sea, pero todas las formas y la profundidad se basan en sombreadores, que básicamente es una función de cómo se refleja la luz. Así que es algo falso, ¿verdad? Y tenemos cosas en nuestros teléfonos, tenemos pantallas. Todo es 2D.

2. El Futuro de la UI y UX en VR y AR

Short description:

XR está agregando una nueva dimensión a la UI y UX en VR y AR. Necesitamos crear interacciones basadas en la realidad en estos medios. Comprender las diferentes dimensiones y limitaciones es crucial. La UI adaptativa y la lectura de la mente también son tendencias emergentes.

Y XR está agregando una nueva dimensión a eso. Entonces, cómo lo hemos adoptado. Tomamos diferentes forms. Digamos que tienes un formulario de registro. Entonces tenemos este formulario flotando en el aire en VR. ¿Realista? No realmente. Algo que hemos adoptado del medio 2D, ¿verdad? O en AR, tenemos flechas que apuntan en diferentes direcciones que rompen por completo la inmersión. Pero lo tenemos porque lo hemos adoptado. Y no hemos inventado algo nuevo.

Así que creo que es más crucial crear interacciones basadas en la realidad en VR y AR. Y si piensas en eso, si necesitas iniciar sesión dentro de VR, actualmente tienes un formulario de inicio de sesión, tienes este teclado flotante, y luego ingresas, escribes tu nombre de usuario y contraseña y entras. Pero ¿es algo que verías en la realidad? No realmente, ¿verdad? Entonces es más realista tener algún tipo de contraseña o llave o lo que sea que simplemente colocas en el lugar o giras la llave dentro de la puerta, y te dejará pasar. Es una especie de interacciones basadas en la realidad, ¿verdad? Entonces necesitamos comprender nuestra realidad para crear estas interacciones. Y el medio es completamente diferente.

Ahora, en VR hay otra dimensión, algo que sucede detrás del espectador. Entonces, estoy mirando a la cámara, pero algo está sucediendo detrás. Entonces no puedo usar la teoría del color para hacer esta increíble animación de botón de llamada a la acción. Entonces necesito usar cosas diferentes como hápticos, sonidos, tal vez ralentizar el tiempo, y así sucesivamente. También hay una UI adaptativa. La UI adaptativa es algo que se usa en la web. Y la idea es que la UI aprende de lo que estás haciendo con ella. Entonces, como, los forms están aprendiendo y adaptándose. Así que puedes buscar eso. Es una especie de nueva tendencia. Y otra cosa que propongo es la lectura de la mente real. Y, sí, obviamente no puedo leer tus pensamientos, ¿verdad? Pero hasta cierto punto. Y quiero preguntarte, ¿qué es? Y obviamente, como estamos en línea. Puedes responder en el chat. Haré una pausa. Entonces, es el universo conocido.

3. Comprendiendo las Neuronas y los Auriculares EEG

Short description:

Todos estos puntos son cúmulos de galaxias, pero en realidad representan neuronas en nuestro cerebro. Las neuronas trabajan en pares, con las neuronas excitatorias liberando glutamato y creando un mecanismo de dipolo. Este cambio potencial puede ser medido por electrodos en nuestro cráneo. Para analizar esto más a fondo, utilizamos auriculares EEG, como el Muse, que ayuda con la meditación.

Y todos estos, como, puntos son cúmulos de galaxias. Y se ve increíble. Pero, ¿qué es esto? Parece bastante similar, ¿verdad? Pero en realidad son neuronas en nuestro cerebro. Entonces, nosotros somos el universo. Y, pregunte en consecuencia.

Entonces, ¿cómo funcionan las neuronas en nuestro cerebro... cómo funcionan? Entonces, las neuronas vienen en pares. Y hay una neurona excitatoria y libera glutamato y crea un mecanismo de dipolo. Básicamente, tiene un polo positivo y uno negativo. Y actúa como una especie de batería. Entonces, tienes un cambio potencial entre diferentes neuronas.

Esto crea un cambio potencial que puede ser medido por electrodos en nuestro cráneo. Y se ve así. Si mides tu cerebro. Entonces, este es el estado de vigilia. Este es el estado de sueño. Y ves que es un poco diferente, ¿verdad? Pero es algo aleatorio, ¿verdad? Entonces, necesitamos analizar eso y entender qué significa todo esto, ¿verdad?

Para hacerlo, utilizaremos auriculares EEG. Y hay muchas versiones de consumo y versiones de investigación de auriculares EEG. Y la idea es colocar electrodos en tu cráneo, y basándonos en eso, medir el cambio potencial debajo de nuestro cráneo. Entonces, los EEG de investigación se ven así. Y son bastante costosos. Pero también hay versiones de consumo. Y en realidad tengo uno aquí. Se llama Muse. Es un buen producto que te ayuda con la meditación. Entonces, si estás meditando, te ayuda a concentrarte y demás. Y, sí, leeré mis ondas cerebrales, y verás cómo se ve. Así que es bastante económico. Solo tiene como 5 electrodos y eso es todo. Pero es bueno para nuestro ejemplo.

4. Conexión a Muse a través de Bluetooth

Short description:

Ahora, no necesito abrir mi cráneo y enchufarlo. Puedo conectarlo usando Bluetooth. Estamos hablando de experimentos, ¿verdad? Es como un experimento mental, literalmente. Pero también como experimentos donde la tecnología nos llevará. Puedo medir en cierta medida lo que está sucediendo en mi cerebro. He creado aquí una pequeña aplicación. Y antes de conectar a Muse, sí, antes de conectar a Muse, en TeamViewer, lo que quiero hacer es ver todas las lecturas de este auricular. Utilizo la biblioteca Muse.js. Y esta biblioteca expone tus lecturas como RxStream a las que puedo suscribirme.

Entonces, ¿cómo conectamos esto a nuestro cerebro? Ahora, no necesito abrir mi cráneo y enchufarlo. Puedo conectarlo usando Bluetooth. Y específicamente usaremos Bluetooth Web. Puedo usar Bluetooth accediendo al objeto Navigator, Bluetooth. Y llamo a requestDevice. Filtraré el servicio de Muse. Y simplemente me conectaré y obtendré algunos atributos del Bluetooth.

Ahora, el soporte no es del todo completo, ¿verdad? Lo vemos en Chrome y por alguna razón en Opera. Pero el resto es más o menos... no, ¿verdad? No es compatible. Pero estamos hablando de experimentos, ¿verdad? Es como un experimento mental, literalmente. Pero también como experimentos donde la tecnología nos llevará. Y veamos la demostración. Así que tengo este espacio de juego aquí. Y puedo emparejarlo con mi auricular. Y verás las ondas cerebrales que pasan. Y estas son mis ondas cerebrales reales. Y como puedes ver, cuando hablo, las ondas cambian un poco. Cuando parpadeo, ves estos pequeños picos, ¿verdad?, de picos de voltaje. Si hago algo como esto, ves los picos más altos. Así que puedo medir en cierta medida lo que está sucediendo en mi cerebro, ¿verdad? Así que esto es bastante bueno.

Pero, ¿qué hago con estos data? Así que he creado aquí una pequeña aplicación. Y antes de conectar a Muse, en realidad, sí, antes de conectar a Muse, en TeamViewer, lo que quiero hacer es ver todas las lecturas de este auricular. Me suscribiré a las lecturas y simplemente las registraré en la consola. Ahora, utilizo la biblioteca Muse.js. Y esta biblioteca expone tus lecturas como RxStream a las que puedo suscribirme. Y simplemente registro en la consola lo que Muse.js me muestra. Así que vamos a conectar. Y veamos qué tenemos aquí.

5. Medición de Ondas Cerebrales y Detección de Parpadeos

Short description:

Para medir las cosas de manera más precisa, utilizamos un filtro de paso de banda para eliminar frecuencias y enfocarnos en picos. Estos picos se dividen en épocas para analizar la referencia temporal. Al aplicar la Transformada Rápida de Fourier, podemos convertir los datos al dominio de frecuencia y reconocer diferentes ondas cerebrales. Cada onda representa un estado mental diferente, como el sueño, la percepción elevada o la relajación. Antes de explorar el aprendizaje automático, demostraré cómo suscribirse a las lecturas de ondas alfa y diferenciar los parpadeos utilizando técnicas de filtrado.

Y como puedes ver, similar al gráfico, no tenemos realmente como los datos son bastante extraños, así que no podemos hacer mucho con eso. Entonces, la pregunta es cómo medimos las cosas de manera más precisa. Para medir de manera más precisa, utilizaremos un filtro de paso de banda. Así que eliminamos las frecuencias, como en el gráfico, eliminamos estas y obtenemos solo los picos.

Ahora, luego necesitamos dividir todo esto en épocas, que básicamente es un marco de tiempo porque queremos tener una referencia temporal, si en un período de tiempo específico hay un pico, probablemente eso sea un parpadeo, ¿verdad? Entonces dividimos esto en épocas y también necesitamos pasar esto por la Transformada Rápida de Fourier. Eso significa que tomamos los datos que obtenemos en microvoltios y queremos convertirlos al dominio de frecuencia, por lo que utilizamos la Transformada Rápida de Fourier y convertimos eso al dominio de frecuencia, por lo que vemos diferentes frecuencias a partir de los datos en bruto que obtenemos.

Ahora podemos reconocer diferentes ondas cerebrales en función de estas frecuencias y la diferenciación es gamma, beta, alfa, theta y delta, y cada una de ellas es diferente para nuestro estado mental. Por ejemplo, en delta, es el sueño, la pérdida de conciencia corporal, la reparación, y así sucesivamente. Gamma es la percepción elevada, el aprendizaje, la resolución de problemas, las tareas, el procesamiento de calidad. Como puedes ver, no son muy distintivas, es un rango amplio. Beta es generalmente estar despierto, y alfa es relajación. Puedo medir el estado alfa y ver si estoy relajado. Así que podemos reaccionar a los picos de las ondas cerebrales, y también podemos alimentar estos datos al aprendizaje automático.

Pero antes de hacer cosas increíbles con el aprendizaje automático, quiero mostrarte algo. Quiero suscribirme al enfoque. Y básicamente me dará las lecturas de las ondas alfa. Además, quiero suscribirme a los parpadeos. Para diferenciar el parpadeo, obtengo las lecturas. Las filtro. Obtengo la lectura solo para el electrodo sobre mi ojo izquierdo. Obtengo el máximo de eso, como el pico. Luego uso RXOperatorSwitchMap para diferenciar el pico. Realmente no me importa el resto de los datos, solo el pico. Si hay un pico, eso es algo que devolveré. Cómo se ve. También necesito eliminar este. Vamos a conectarlo de nuevo. Y lo que veremos. Si parpadeo, puedes ver aquí que estoy parpadeando.

6. Alimentando Datos al Aprendizaje Automático

Short description:

Queremos alimentar los datos de parpadeo al aprendizaje automático. Me conectaré a mi auricular usado, obtendré todos los datos, los pasaré por los filtros necesarios y los agregaré como una muestra al Clasificador KNN. Al clasificar los datos, puedo determinar en qué carta estoy pensando. Los principales temas de interés son VRXL e IoT AI.

Entonces, como puedes ver, a veces es peor y no es porque sea un umbral, y tal vez no lo puse realmente cerca de mi cráneo. Entonces, sí, esto es el parpadeo, ¿verdad? Ahora, queremos alimentar estos data al aprendizaje automático. Para hacerlo, lo que haré es ir a mi app.js y agregaré mi panel de predicción, o predecir algunas cosas. Y aquí tengo tres cartas, y estas tres cartas, una es web y móvil, otra es VRXR y otra es IoT AI. Entonces, lo que intentaré hacer es conectarme a mi auricular usado, obtener todos los data, pasarlos por todos los filtros que necesito, y luego agregar esto como una muestra al Clasificador KNN, que es un algoritmo de aprendizaje automático, y comenzaremos a clasificar en qué carta estoy pensando. Entonces, permíteme grabar estas ondas muy rápido. Entonces, haré clic en este botón mientras miro la web y el móvil. Ahora VRXL, y ahora IoT AI. Entonces, ahora, si hago clic en clasificar, podré cambiar solo mirando, las manos están aquí, así que puedo simplemente mirar diferentes cartas y cambiar entre ellas. Y, sí, como puedes ver, el tema principal en el que estoy interesado es VRXL y IoT AI.

7. Control Mental con AR y Recursos de Aprendizaje

Short description:

Entonces, esto es bastante genial. Tengo una tienda más grande aquí con la bandera de habilitar drones, y sí, tengo un dron aquí, este pequeño compañero. Me conectaré a mi auricular Muse, me conectaré a mi dron, grabaré las ondas cerebrales y comenzaré a clasificar. La idea principal aquí es que el futuro ya está aquí y ustedes son quienes lo construirán. Gracias. Vamos a traer a Vlad de vuelta al escenario para una pregunta rápida. Después de ver algo como esto, ¿por dónde empieza alguien si quiere comenzar a aprender estas cosas por sí mismo? Puedes ampliar tus horizontes aprendiendo React Native y AR, o React y Bluetooth y drones. Hay recursos como Egghead.io y masterclasses disponibles. No dudes en contactarme en Twitter para obtener orientación y materiales de aprendizaje. Gracias, Vlad.

Entonces, esto es bastante genial, pero si funciona, agregaré otro nivel de genialidad aquí. Así que... Tengo una tienda más grande aquí con la bandera de habilitar drones, y sí, tengo un dron aquí, este pequeño compañero. Así que, a veces funciona, así que veamos si funciona esta vez. Lo que haré primero es conectarme a mi auricular Muse, no debo parpadear. Luego me conectaré a mi dron. Ok, aquí tenemos el dron y espero que lo vean. Grabaré las ondas cerebrales y comenzaré a clasificar. Ahora, espero que esté en la vista de la cámara. Ok, ahora intentaré moverlo solo mirándolo y lo haré aterrizar. Y se cayó. No estoy seguro si estaba en la vista, así que intentaré ponerlo en la vista nuevamente. Ahora probablemente esté aquí y nuevamente, lo estoy moviendo solo con el poder de mi pensamiento. Eso fue bastante genial. La idea principal aquí es cuál es el propósito de todo esto, ¿verdad? ¿Por qué volamos drones con nuestra mente? ¿Por qué usamos estos dispositivos? No son tan confiables. Solo tenemos soporte de Bluetooth web en Chrome. La razón principal de esto es que nosotros somos quienes establecemos las reglas y rompemos las reglas, inventamos cosas nuevas, ¿verdad? Mi conclusión principal de esta charla es que el futuro ya está aquí y ustedes son quienes lo construirán. Gracias. Muy bien. Eso fue increíble. No pensé que veríamos a alguien volar un dron con su mente tan temprano en la mañana. Desafortunadamente, no tenemos mucho tiempo, pero vamos a traer a Vlad de vuelta al escenario para una pregunta rápida. Y luego pasaremos a nuestra próxima sesión. Entonces, Vlad, después de ver algo como esto, el control mental con AR, ¿por dónde empieza alguien si quiere comenzar a aprender estas cosas por sí mismo? Quiero decir, el punto principal de esta charla fue que, ¿verdad? Necesitas, como, puedes cambiar el mundo básicamente, ¿verdad? Y tú eres quien puede cambiar todo, ¿verdad? Y luego debes decidir qué quieres aprender, en términos de tecnología. ¿Quieres ser más experimentado solo en React o quieres ampliar tus horizontes, ¿verdad? Por ejemplo, si quieres tener React Native y AR, o tener React y Bluetooth y drones, puedes acceder a diferentes recursos. Hay Egghead.io, que es un sitio web increíble donde también estaré dando cursos. De hecho, pronto haré un masterclass sobre React Native y AR. De hecho, creé este sonido para React Summit, así que enviaré el enlace en el canal de la comunidad. Si quieres participar en este masterclass, puedes hacerlo. Además, también he dado muchas charlas. Tengo un canal de YouTube donde transmito sobre VR, pero también estaré grabando muchas cosas sobre este tema. Porque, quiero decir, me gusta enseñar estas cosas, ¿verdad? Por eso también comencé un canal de Twitch. Y sí, ese es uno de los lugares, pero obviamente hay muchos lugares donde aprender. Y si realmente quieres meterte en esto, te diría que me envíes un mensaje directo en Twitter, y te informaré. Dime qué quieres hacer en cuanto a tecnología, y probablemente podré dirigirte a materiales de aprendizaje y fuentes gratuitas en algún lugar, y así sucesivamente. Excelente. Bueno, Vlad, muchas gracias. Realmente lo apreciamos. Desearía que tuviéramos más tiempo para preguntas y respuestas. Pero para volver al rumbo, ahora pasaremos a una mesa redonda.

Check out more articles and videos

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

No resuelvas problemas, elimínalos
React Advanced 2021React Advanced 2021
39 min
No resuelvas problemas, elimínalos
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Los Átomos de Jotai Son Simplemente Funciones
React Day Berlin 2022React Day Berlin 2022
22 min
Los Átomos de Jotai Son Simplemente Funciones
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
El Epic Stack
React Summit US 2023React Summit US 2023
21 min
El Epic Stack
Top Content
This Talk introduces the Epic Stack, a project starter and reference for modern web development. It emphasizes that the choice of tools is not as important as we think and that any tool can be fine. The Epic Stack aims to provide a limited set of services and common use cases, with a focus on adaptability and ease of swapping out tools. It incorporates technologies like Remix, React, Fly to I.O, Grafana, and Sentry. The Epic Web Dev offers free materials and workshops to gain a solid understanding of the Epic Stack.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
Una Mirada al Futuro del Desarrollo Web en 2025
JSNation US 2024JSNation US 2024
32 min
Una Mirada al Futuro del Desarrollo Web en 2025
Top Content
Today, Wes Boss introduces the new features of the web, including customizable select and temporal, a standardized API for working with dates, time, and duration. The current date API in JavaScript has some problems related to time zones and date manipulation. With the temporal API, you can create dates without a time zone, specify dates without a year, and create durations without being attached to a specific date. The API also provides features for finding the difference between two dates. Invokers is a declarative click handlers API that eliminates the need for JavaScript. Speculation API enables pre-rendering and pre-loading of pages, improving performance. The CSS Anchor API allows positioning elements based on another element's location. Web components are encapsulated, framework-agnostic, and easy to use, offering a standardized approach for building reusable UI components. Building media UI components, like video players, is made easier with web components like Shoelace. Transformers JS allows running AI models in JavaScript for tasks like emotion detection and background removal. Python doesn't run in the browser, but JavaScript does. Small AI models can be loaded and executed faster in the browser using technologies like WebGPU. Animate height auto transition using calc size. Apply starting styles to elements for smooth animations. Use Vue transition for CSS and JavaScript animations. Syntax website with Vue transition for smooth page transitions. CSS relative colors allow for lighter or darker shades. Scope CSS ensures styles only apply to specified div containers. Web primitives facilitate modern JavaScript code. You can create web requests and receive web responses using the same primitives on both the client and server. There are many new web standards that work everywhere and frameworks like Hano and Nitro are built upon them. The select and Popover elements are accessible by default. Most of the discussed features will be available in all browsers by 2025. The future of web development with AI is uncertain, but web developers should embrace AI tools to improve efficiency. Implicit CSS lazy loading depends on whether it's prefetching or pre-rendering. Wes Boss discusses the specific features he is excited about in web development, including starting style, calc auto, and allowed discrete. He shares his preferred way of staying informed on new web development discoveries, emphasizing the importance of being part of the community and keeping up with industry discussions. Wes also mentions reading W3C meeting notes and recommends following the Twitter account Intent2Ship to stay updated on upcoming CSS features. Lastly, he discusses the potential impact of the new Scope CSS feature on developers' management of styles.

Workshops on related topic

React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Masterclass Web3 - Construyendo Tu Primer Dapp
React Advanced 2021React Advanced 2021
145 min
Masterclass Web3 - Construyendo Tu Primer Dapp
Top Content
Featured Workshop
Nader Dabit
Nader Dabit
En esta masterclass, aprenderás cómo construir tu primer dapp de pila completa en la blockchain de Ethereum, leyendo y escribiendo datos en la red, y conectando una aplicación de front end al contrato que has desplegado. Al final de la masterclass, entenderás cómo configurar un entorno de desarrollo de pila completa, ejecutar un nodo local e interactuar con cualquier contrato inteligente usando React, HardHat y Ethers.js.
IA a demanda: IA sin servidor
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
IA a demanda: IA sin servidor
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
En esta masterclass, discutimos los méritos de la arquitectura sin servidor y cómo se puede aplicar al espacio de la IA. Exploraremos opciones para construir aplicaciones RAG sin servidor para un enfoque más lambda-esque a la IA. A continuación, nos pondremos manos a la obra y construiremos una aplicación CRUD de muestra que te permite almacenar información y consultarla utilizando un LLM con Workers AI, Vectorize, D1 y Cloudflare Workers.
AI para Desarrolladores de React
React Advanced 2024React Advanced 2024
142 min
AI para Desarrolladores de React
Top Content
Featured Workshop
Eve Porcello
Eve Porcello
El conocimiento de las herramientas de AI es fundamental para preparar el futuro de las carreras de los desarrolladores de React, y la suite de herramientas de AI de Vercel es una vía de acceso accesible. En este curso, examinaremos más de cerca el Vercel AI SDK y cómo esto puede ayudar a los desarrolladores de React a construir interfaces de transmisión con JavaScript y Next.js. También incorporaremos APIs de terceros adicionales para construir y desplegar una aplicación de visualización de música.
Temas:- Creación de un Proyecto de React con Next.js- Elección de un LLM- Personalización de Interfaces de Transmisión- Construcción de Rutas- Creación y Generación de Componentes - Uso de Hooks (useChat, useCompletion, useActions, etc)
Building Full Stack Apps With Cursor
JSNation 2025JSNation 2025
46 min
Building Full Stack Apps With Cursor
Featured Workshop
Mike Mikula
Mike Mikula
En esta masterclass cubriré un proceso repetible sobre cómo iniciar aplicaciones full stack en Cursor. Espere comprender técnicas como el uso de GPT para crear requisitos de producto, esquemas de base de datos, hojas de ruta y usarlos en notas para generar listas de verificación que guíen el desarrollo de aplicaciones. Profundizaremos más en cómo solucionar alucinaciones/errores que ocurren, indicaciones útiles para hacer que su aplicación se vea y se sienta moderna, enfoques para conectar cada capa y más. Al final, ¡espere poder ejecutar su propia aplicación full stack generada por IA en su máquina!
Por favor, encuentre las preguntas frecuentes aquí
How to 9,2x Your Development Speed with Cline
JSNation 2025JSNation 2025
64 min
How to 9,2x Your Development Speed with Cline
Featured Workshop
Nik Pash
Nik Pash
La forma en que escribimos código está cambiando fundamentalmente. En lugar de quedar atrapado en bucles anidados y detalles de implementación, imagine enfocarse puramente en la arquitectura y la resolución creativa de problemas mientras su programador de pares de IA maneja la ejecución. En esta masterclass práctica, te mostraré cómo aprovechar Cline (un agente de codificación autónomo que recientemente alcanzó 1M de descargas en VS Code) para acelerar drásticamente tu flujo de trabajo de desarrollo a través de una práctica que llamamos "vibe coding" - donde los humanos se enfocan en el pensamiento de alto nivel y la IA maneja la implementación.Descubrirás:Los principios fundamentales del "vibe coding" y cómo se diferencia del desarrollo tradicionalCómo diseñar soluciones a un alto nivel y hacer que la IA las implemente con precisiónDemostración en vivo: Construcción de un sistema de almacenamiento en caché de grado de producción en Go que nos ahorró $500/semanaTécnicas para usar IA para entender bases de código complejas en minutos en lugar de horasMejores prácticas para solicitar a los agentes de IA que obtengan exactamente el código que deseasErrores comunes a evitar al trabajar con asistentes de codificación de IAEstrategias para usar IA para acelerar el aprendizaje y reducir la dependencia de ingenieros seniorCómo combinar efectivamente la creatividad humana con las capacidades de implementación de IAYa sea que seas un desarrollador junior que busca acelerar tu aprendizaje o un ingeniero senior que desea optimizar tu flujo de trabajo, saldrás de esta masterclass con experiencia práctica en desarrollo asistido por IA que puedes aplicar inmediatamente a tus proyectos. A través de demostraciones de codificación en vivo y ejercicios prácticos, aprenderás cómo aprovechar Cline para escribir mejor código más rápido mientras te enfocas en lo que importa: resolver problemas reales.