Instala Nada: Interfaces de Usuario de Aplicaciones con APIs Nativas del Navegador

This ad is not shown to multipass and full ticket holders
React Summit
React Summit 2025
June 13 - 17, 2025
Amsterdam & Online
The biggest React conference worldwide
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit 2025
React Summit 2025
June 13 - 17, 2025. Amsterdam & Online
Learn more
Bookmark
Rate this content

Es posible que no necesites tanto JS como piensas para lograr patrones comunes de UI con estas nuevas APIs nativas del navegador. Sumérgete en las nuevas y futuras APIs de CSS, HTML y JS que hacen que nuestro código sea más ligero y rápido de enviar.

This talk has been presented at JSNation 2024, check out the latest edition of this JavaScript Conference.

Scott Tolinski
Scott Tolinski
31 min
13 Jun, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Esta charla introduce demostraciones reales usando HTML, CSS y JavaScript para mostrar nuevas o infrautilizadas APIs del navegador, con puntuaciones de envío proporcionadas para cada API. El elemento dialogue permite la creación de modales con JavaScript mínimo y es compatible con el 96% de los navegadores. La API de web animations es una solución simple y bien soportada para crear animaciones, mientras que la API de view transitions ofrece soluciones fáciles de animación sin CSS. La API de scroll snap permite crear swipers sin JavaScript, proporcionando una experiencia de desplazamiento suave.

1. Introducción a las APIs de Navegador y Demos

Short description:

Hola, ¿cómo están todos? Soy el co-anfitrión del Syntax Podcast. Estamos haciendo mucho en Syntax. Hoy, veremos demos reales usando HTML, CSS y JavaScript. Estas demos muestran nuevas o infrautilizadas APIs de navegador. No se requieren frameworks ni pasos de construcción. Después de mostrar cada API, proporcionaré un puntaje de envío. Tengo muchas demos para esta charla, disponibles también en mi sitio web.

♪♪♪ Hola, ¿cómo están todos? ¡Whoo! Enfermo. Genial. Hola. ¿Qué tal? Mi nombre es Scott Talinsky. Soy el co-anfitrión del Syntax Podcast. Es un podcast que hago tres veces a la semana con Wes Boss. Hablamos sobre JavaScript. Es bastante enfermo. También soy productor ejecutivo en Sentry donde puedo trabajar en Syntax a tiempo completo. De hecho, estamos haciendo mucho en Syntax ahora mismo, más allá del podcast. Tenemos un canal de YouTube y mucho en el sitio web, así que échale un vistazo en syntax.fm.

Entonces, ¿de qué voy a hablar hoy? Bueno, vamos a ver algunas demos reales, y todas estas demos se ejecutan completamente en HTML, CSS y JavaScript. No hay frameworks, nada, ni pasos de construcción. Estas van a estar viendo nuevas o potencialmente infrautilizadas APIs de navegador, algunas de las cuales probablemente hayas visto antes, algunas de las cuales tal vez no, y tal vez no sabías que podías usarlas hoy. Así que, de nuevo, todas estas demos, se pueden cargar directamente en Chrome, sin construcción, sin framework.

Además de eso, después de mostrarte una nueva API, le daré un puntaje de envío, y ese puntaje de envío va a ser ya sea que deberías revisarlo ahora, algo de lo que deberías estar al tanto, deberías probarlo ahora porque realmente está llegando, o puedes enviarlo. Puedes enviarlo hoy. Tengo muchas demos, y otro código QR para ti. Tengo tantas demos para esta charla, que no pude incluirlas todas en las diapositivas, y no solo eso, no quería pasar demasiado tiempo en el código en sí. Así que voy a pasar rápidamente por mucho del código, pero vamos a hablar mucho sobre las APIs en sí. También tendré esto disponible al final de la charla, así que voy a avanzar. Puedes encontrarlo en mi sitio web, Tolin.ski también.

2. Using the Dialogue Element for Modals

Short description:

¿Alguna vez has construido interfaces de usuario como modales, menús, navegaciones móviles, cajones o presentaciones de diapositivas? A menudo recurrimos a frameworks de JavaScript para crearlos. Pero otra opción es usar APIs de navegador. Comencemos con el elemento dialogue, que te permite crear modales con JavaScript mínimo. Proporciona características de accesibilidad y funciona con React, Vue y otros frameworks. El elemento dialogue es compatible con el 96% de los navegadores, lo que lo convierte en una opción viable para enviar tu proyecto.

¿Alguna vez has construido alguna de las siguientes interfaces de usuario? Un modal, un menú, una navegación móvil, un cajón, una presentación de diapositivas? Me lo imagino. Estos son los tipos de cosas que construimos todo el tiempo, ¿verdad? Normalmente, si estás construyendo una de estas cosas, podrías recurrir a tu framework de JavaScript, ¿verdad? Personalmente, es realmente fácil tener una variable de estado y simplemente alternar esa variable de estado, añadirle un poco de animación, y lo siguiente que sabes, tienes un modal, ¿verdad?

Pero, ya sabes, otra cosa que podríamos hacer es ir a npm install e incorporar quién sabe qué en nuestra aplicación. Podría ser cualquier cosa. El primero del que voy a hablar es de modales, alertas y diálogos. La primera demo que tenemos aquí es solo un modal básico. Esto está usando el elemento dialogue en HTML. Puedes ver que todavía está usando JavaScript. De hecho, la mayoría de estas demos seguirán usando JavaScript. Solo vamos a usar menos JavaScript, y así que todo lo que estamos haciendo aquí realmente es algunos selectores de consulta y llamando a show modal. Lo siguiente que sabes, tenemos un modal. Lo que es tan genial de esto es que aplica un nert a tu página para que no tengas que hacer el truco de overflow hidden para prevenir el desplazamiento. También te da atajos de teclado para que puedas presionar escape para cerrarlo, pero además de eso, captura tu enfoque para que puedas comenzar a escribir de inmediato. Todas estas cosas de accesibilidad que típicamente tendríamos que codificar nosotros mismos. Pero no solo eso, apenas tenemos que escribir cualquier JavaScript para que esto funcione. Puedes usar estas técnicas exactamente con React, Vue, Solid, cualquier cosa, puedes usar estas técnicas, ¿verdad? No está supeditado a vanilla JS. El elemento dialogue. ¿Podrías enviar el elemento dialogue hoy, y estás enviando el elemento dialogue hoy? Sí. Esto está disponible en el 96 por ciento de los navegadores.

No te dije esto, pero cada vez que obtenemos un "envíalo", voy a tener un gif de break-dance. Este tipo es el representante olímpico de los Países Bajos en los Juegos Olímpicos de París 2024. Este es tu representante olímpico. Es realmente bueno. Muy bien. Así que podrías haber visto 96 por ciento, pensado, está bien, 96 por ciento, no 100, pero muchas de estas cosas nunca van a llegar al 100, y si ves algo 96, 95, en cualquier lugar por ahí, mientras sea compatible con los tres grandes, puedes imaginar que es muy probablemente enviable. Muchas de estas cosas tienen polyfills si necesitas soporte más atrás. Me imagino que muchos de ustedes están enviando Grid hoy. Grid solo tiene 97.25 si no está prefijado. Prefijado, incluso 97.7. Llegar a ese rango de 97, 96 por ciento es bastante bueno. Así que si quisiéramos animar esto, podríamos incorporar la web animations API, o WAPI, y si abrimos esto, puedes ver que obtenemos un bonito diálogo animado.

QnA

Check out more articles and videos

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

Ampliando los límites de la codificación de video en navegadores con WebCodecs
JSNation 2023JSNation 2023
25 min
Ampliando los límites de la codificación de video en navegadores con WebCodecs
Top Content
This Talk explores the challenges and solutions in video encoding with web codecs. It discusses drawing and recording video on the web, capturing and encoding video frames, and introduces the WebCodecs API. The Talk also covers configuring the video encoder, understanding codecs and containers, and the video encoding process with muxing using ffmpeg. The speaker shares their experience in building a video editing tool on the browser and showcases Slantit, a tool for making product videos.
API WebHID: Controla Todo a través de USB
JSNation 2022JSNation 2022
23 min
API WebHID: Controla Todo a través de USB
Today's Talk introduces the webHID API, which allows developers to control real devices from the browser via USB. The HID interface, including keyboards, mice, and gamepads, is explored. The Talk covers device enumeration, input reports, feature reports, and output reports. The use of HID in the browser, especially in Chrome, is highlighted. Various demos showcase working with different devices, including a DualShock controller, microphone, gamepad, and Stream Deck drum pad. The Talk concludes with recommendations and resources for further exploration.
Automatiza el Navegador con la API de Renderizado del Navegador de Workers
JSNation 2024JSNation 2024
20 min
Automatiza el Navegador con la API de Renderizado del Navegador de Workers
The Talk discusses browser automation using the Worker's Browser Rendering API, which allows tasks like navigating websites, taking screenshots, and creating PDFs. Cloudflare integrated Puppeteer with their workers to automate browser tasks, and their browser rendering API combines remote browser isolation with Puppeteer. Use cases for the API include taking screenshots, generating PDFs, automating web applications, and gathering performance metrics. The Talk also covers extending sessions and performance metrics using Durable Objects. Thank you for attending!
Visualización de Cuellos de Botella de Rendimiento Front-End
React Summit 2020React Summit 2020
34 min
Visualización de Cuellos de Botella de Rendimiento Front-End
React's web-based tools allow for independent learning. Dazzone, a sports streaming service, faces challenges with low memory and CPU targets. Measuring, analyzing, and fixing performance issues is crucial. Virtualization improves rendering efficiency and performance. The application is now much faster with significantly less jank.
¡MIDI en el Navegador... ¡Vamos a Rockear la Web!
JSNation 2022JSNation 2022
28 min
¡MIDI en el Navegador... ¡Vamos a Rockear la Web!
MIDI is a versatile communication protocol that extends beyond music and opens up exciting possibilities. The Web MIDI API allows remote access to synths and sound modules from web browsers, enabling various projects like music education systems and web audio-based instruments. Developers can connect and use MIDI devices easily, and the Web MIDI API provides raw MIDI messages without semantics. The WebMidi.js library simplifies working with the Web MIDI API and offers a user-friendly interface for musicians and web developers. MIDI on the web has generated significant interest, with potential for commercial growth and endless possibilities for web developers.
Notificaciones Push Web Bien Hechas
JSNation 2023JSNation 2023
11 min
Notificaciones Push Web Bien Hechas
Let's talk about web push notifications and their benefits. Web push notifications have higher opt-in and click rates compared to traditional methods. The web push API should be used responsibly, with subscription requests initiated only after explicit user action. Improve engagement by using emojis in notifications. Connect with the speaker on LinkedIn for more information about the web push API.

Workshops on related topic

Escribiendo Módulos Universales para Deno, Node y el Navegador
Node Congress 2022Node Congress 2022
57 min
Escribiendo Módulos Universales para Deno, Node y el Navegador
Workshop
Luca Casonato
Luca Casonato
En este masterclass te guiaré en la escritura de un módulo en TypeScript que pueda ser utilizado por usuarios de Deno, Node y los navegadores. Explicaré cómo configurar el formato, linting y pruebas en Deno, y luego cómo publicar tu módulo en deno.land/x y npm. Comenzaremos con una breve introducción sobre qué es Deno.