Instalar Nada: Interfaces de Aplicación con APIs Nativas del Navegador

Rate this content
Bookmark

Tal vez no necesites tanto JS como crees 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 liviano y rápido de implementar.

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 presenta demos reales utilizando HTML, CSS y JavaScript para mostrar nuevas o subutilizadas APIs del navegador, con puntuaciones de implementación proporcionadas para cada API. El elemento de diálogo permite la creación de modales con un mínimo de JavaScript y es compatible con el 96% de los navegadores. La API de animaciones web es una solución simple y bien soportada para crear animaciones, mientras que la API de transiciones de vista ofrece soluciones alternativas de animación sin CSS. La API de desplazamiento con ajuste permite deslizadores sin JavaScript, proporcionando una experiencia de desplazamiento suave.

1. Introducción a las API del navegador y Demostraciones

Short description:

¡Hola, cómo están todos? Soy el coanfitrión del Podcast Syntax. Estamos haciendo muchas cosas en Syntax. Hoy, estaremos viendo demostraciones reales utilizando HTML, CSS y JavaScript. Estas demostraciones muestran nuevas API del navegador o API subutilizadas. No se requieren frameworks ni pasos de construcción. Después de mostrar cada API, proporcionaré una puntuación de envío. También tengo muchas demostraciones para esta charla, disponibles en mi sitio web también.

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

Entonces, ¿de qué voy a hablar hoy? Bueno, vamos a echar un vistazo a algunas demostraciones reales, y todas estas demostraciones se ejecutan completamente en HTML, CSS y JavaScript. No hay frameworks, nada, sin pasos de construcción. Vamos a ver nuevas API del navegador o API potencialmente subutilizadas, algunas de las cuales probablemente hayas visto antes, algunas de las cuales tal vez no, y tal vez no sabías que podías usar hoy. Entonces, nuevamente, todas estas demostraciones se pueden cargar directamente en Chrome, sin construcción, sin framework.

Además de eso, después de mostrarte una nueva API, le daré una puntuación de envío, y esa puntuación de envío puede ser que debes verificarla ahora, algo de lo que debes estar al tanto, debes probarlo ahora porque realmente está por llegar, o puedes enviarlo. Puedes enviarlo hoy. Tengo muchas demostraciones, y otro código QR para ti. Tengo tantas demostraciones para esta charla que no pude incluirlas todas en las diapositivas, y no solo eso, no quería pasar demasiado tiempo en el code en sí. Así que voy a pasar rápidamente por mucho del code, pero vamos a hablar mucho sobre las propias API. También lo tendré disponible al final de la charla, así que voy a avanzar. También puedes encontrarlo en mi sitio web, Tolin.ski.

2. Usando el Elemento de Diálogo para Modales

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 utilizar las API del navegador. Comencemos con el elemento de diálogo, que te permite crear modales con un mínimo de JavaScript. Proporciona funciones de accesibilidad y funciona con React, Vue y otros frameworks. El elemento de diálogo 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? Imagino que sí. Estos son los tipos de cosas que construimos todo el tiempo, ¿verdad? Normalmente, si estás construyendo una de estas cosas, probablemente recurrirías a tu JavaScript framework, ¿verdad? Personalmente, es muy fácil tener una variable de estado y simplemente alternar ese estado variable, agregar un poco de animation y, al siguiente momento, tienes un modal, ¿verdad?

Pero, ya sabes, otra cosa que podríamos hacer es ir a npm install y agregar quién sabe qué a nuestra aplicación. Podría ser cualquier cosa. La primera de la que voy a hablar son los modales, alertas y diálogos. La primera demostración que tenemos aquí es un modal básico. Esto utiliza el elemento de diálogo en HTML. Puedes ver que todavía se utiliza JavaScript. De hecho, la mayoría de estas demostraciones seguirán utilizando JavaScript. Solo vamos a utilizar menos JavaScript, y lo que estamos haciendo aquí realmente es algunos selectores de consulta y llamando a show modal. Al siguiente momento, tenemos un modal. Lo genial de esto es que aplica un efecto a tu página para que no tengas que hacer el truco de ocultar el desbordamiento para evitar el desplazamiento. También te proporciona accesos directos de teclado para cerrarlo, pero además de eso, captura tu enfoque para que puedas comenzar a escribir de inmediato. Todas estas cosas de accessibility que normalmente tendríamos que code nosotros mismos. Pero no solo eso, apenas tenemos que escribir JavaScript para que esto funcione. Puedes utilizar estas técnicas exactamente con React, Vue, Solid, cualquier cosa, puedes utilizar estas técnicas, ¿verdad? No está limitado a JS puro. El elemento de diálogo. ¿Podrías enviar el elemento de diálogo hoy y lo estás enviando hoy? Sí. Esta función está disponible en el 96 por ciento de los navegadores.

No te lo dije, pero cada vez que lo enviamos, voy a mostrar un gif de breakdance. Este chico 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. Es posible que hayas visto el 96 por ciento y pensado, bueno, 96 por ciento, no es 100, pero muchas de estas cosas nunca llegarán al 100, y si ves algo con un 96, 95, en cualquier lugar de ahí, siempre y cuando sea compatible con los tres grandes, puedes imaginar que es probablemente posible enviarlo. Muchas de estas cosas tienen polyfills si necesitas soporte para versiones anteriores. Imagino que muchos de ustedes están enviando Grid hoy. Grid solo tiene un 97.25 si no tiene prefijos. Con prefijos, incluso 97.7. Llegar a ese rango del 97, 96 por ciento es bastante bueno. Entonces, si quisiéramos animar esto, podríamos utilizar la API de animaciones web, o WAPI, y si lo abrimos, podemos ver 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.
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.
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!
¡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.