Autoría de HTML en un Mundo JavaScript

Rate this content
Bookmark

En esta charla, Tony muestra cómo un enfoque de autoría y HTML semántico primero para el trabajo de plantillas JSX conduce a componentes de interfaz de usuario más legibles, mantenibles y accesibles. Demuestra cómo pensar en implementar un prototipo de interfaz de usuario de una manera semántica, autoría de HTML antes de los visuales. Muestra cómo el marcado accesible mejora el rendimiento, reduce el tamaño del DOM, minimiza el tiempo dedicado a CSS y reduce la carga cognitiva no solo para los desarrolladores, sino también para todos nuestros usuarios, sin importar cómo consuman nuestros sitios y aplicaciones.

Tony Alicea
Tony Alicea
21 min
15 Nov, 2023

Comments

Sign in or register to post your comment.
  • Timothy Trimble
    Timothy Trimble
    Excellent presentation, Tony. When I went to college to get my Web Application Developer Certificate, the first semester of web development was focused on HTML and the basics of JavaScript. For me, this was easy, and I ended up helping other students get through it. It wasn't until the second semester that he introduced React and Vue. I found it very refreshing to go back to the foundations of web development. We get so focused on the tools and the plugins, that we tend to forget the layer that supports everything else. I'll be sharing this with my team.

Video Summary and Transcription

Esta charla de Tony Alicia se centra en la autoría de HTML en un mundo JavaScript. El orador desafía a los desarrolladores a cambiar su enfoque para construir componentes React comenzando con HTML primero. Al autorizar HTML de una manera semántica, se puede mejorar la legibilidad y el mantenimiento. Un HTML bien autorizado proporciona una mejor comprensión del contenido y mejora la accesibilidad. También tiene beneficios de rendimiento al reducir el tamaño del DOM. Invertir tiempo en HTML puede ahorrar tiempo y hacer que las aplicaciones sean más a prueba de futuro.

Available in English

1. Introducción y Antecedentes

Short description:

Hola, soy Tony Alicia. Esto es Autoría de HTML en un Mundo de JavaScript. Enseño en Udemy, Pluralsight, Teachable y YouTube. Conéctate conmigo en mi sitio web en TonyAlicia.dev o encuéntrame en YouTube, Twitter. Aprende sobre The Smythe Group en TheSmytheGroup.com.

Hola, soy Tony Alicia. Esto es Autoría de HTML en un Mundo de JavaScript. Primero, un poco sobre mí. Puedes encontrarme enseñando en Udemy, Pluralsight, Teachable y YouTube y trabajo con una empresa llamada The Smythe Group. Ahora, si te gustaría conectar, no dudes en ponerte en contacto. Puedes encontrarme y mis cursos en mi sitio web en TonyAlicia.dev. Envíame un correo electrónico, encuéntrame en YouTube, Twitter. Puedes ir a TheSmytheGroup.com para descubrir cómo ayudamos a los equipos de desarrollo a convertirse en lo mejor que pueden ser y hacer su mejor trabajo.

2. Autoría de HTML en un Mundo de JavaScript

Short description:

Pero esta masterclass es Autoría de HTML en un Mundo de JavaScript. Me gustaría desafiarte a cambiar tu forma de pensar, a cambiar tu enfoque de cómo construyes tus componentes de React. Digamos que obtienes un prototipo. ¿Cuál es la primera cosa que pasa por tu cabeza? ¿Cuáles son los primeros pasos en tu mente mientras imaginas implementar el prototipo en React? Comencemos pensando en HTML primero. ¿Qué pasaría si pensáramos en nuestro HTML primero y luego comenzáramos a pensar en cómo hacer que la aplicación funcione y el CSS viene de la mano mientras lo hacemos parecer al prototipo? El punto principal de autorizar nuestro HTML es elegir nuestros elementos HTML de acuerdo a la información y las cosas que están sucediendo en la página. Ahora hablemos de los beneficios de autorizar nuestro HTML de una manera semántica y cómo realmente se ve. La autoría de HTML es una habilidad. Y es una habilidad muy aprendible.

Pero esta masterclass es Autoría de HTML en un Mundo de JavaScript. Y todos nosotros, todos ustedes que están escuchando, todos ustedes pasan su tiempo en JavaScript. Ya sea que estemos escribiendo TypeScript, ya sea que estemos lidiando con bases de datos, ya sea que estemos en el servidor, ya sea que estemos escribiendo pruebas, nuestra vida gira en torno a JavaScript. Es un mundo de JavaScript. Y sin embargo, hay tres patas del taburete cuando se trata de tecnologías web fundamentales, HTML, CSS, y JavaScript.

Entonces, en esta masterclass, me gustaría desafiarte a cambiar tu forma de pensar, a cambiar tu enfoque de cómo construyes tus componentes de React. Lo que quiero decir con eso es esto. Digamos que obtienes un prototipo. Este es un ejemplo muy simplista. Pero obtienes un prototipo, quizás de un diseñador, y ahora tienes que implementarlo. ¿Cuál es la primera cosa que pasa por tu cabeza? ¿Cuáles son los primeros pasos en tu mente mientras imaginas implementar el prototipo en React? Bueno, puede ser que empieces a pensar en cuáles serán los componentes, cómo será la estructura del componente, cuál será el CSS para hacer que el sitio web o la aplicación web se parezcan a un prototipo. Entonces, realmente, mentalmente, comenzamos en el mundo del CSS. ¿Cómo puedo hacer que se parezca al prototipo? Y comenzamos en el mundo de JS. ¿Cómo puedo hacer que funcione? ¿Cómo puedo hacer que la aplicación real haga lo que el prototipo dice que debería hacer? Y luego, en el camino, en algún lugar del camino, metemos algo de HTML. Realmente es una especie de estructura, un andamio, un esqueleto en el que colgar un código de JavaScript y CSS. Y si estamos escribiendo JSX, podrías decir, bueno, no estoy escribiendo HTML. Pero realmente, lo estamos, porque ambos se están convirtiendo en el DOM. Y así, en última instancia para el usuario, es lo mismo que si estuviéramos escribiendo HTML. Así que elegir nuestros elementos es algo que sucede en el camino. Me gustaría desafiarte a cambiar tu mentalidad y en su lugar pensar en HTML primero. ¿Qué pasaría si pensáramos en nuestro HTML primero y luego comenzáramos a pensar en cómo hacer que la aplicación funcione y el CSS viene de la mano mientras lo hacemos parecer al prototipo? De nuevo, si solo estamos mirando el prototipo y estamos pensando en el HTML, lo que estamos realmente pensando es cuál es el significado de cada una de estas piezas de información que vemos en el prototipo. Si estamos pensando en HTML, estamos pensando en semántica y la palabra semántica significa tener que ver con el significado. El punto principal de autorizar nuestro HTML, y vamos a introducir esa frase cuando autorizamos nuestro HTML, cuando nos comportamos como autores de HTML, es decir, estamos eligiendo nuestros elementos de HTML de acuerdo a la información y las cosas que están sucediendo en la página en la pantalla, entonces estamos lidiando con semántica. Estamos autorizando de una manera semántica.

Ahora me gustaría hablar sobre los beneficios de autorizar nuestro HTML de una manera semántica y qué realmente parece. Para empezar, hablemos de la capacidad de aprendizaje. Todos estamos tratando de mantenernos al día con las últimas cosas que suceden en el mundo de JavaScript. Pero HTML es una habilidad. La autoría de HTML es una habilidad. Y es una habilidad muy aprendible.

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

The Good, The Bad, and The Web Components
JSNation 2023JSNation 2023
29 min
The Good, The Bad, and The Web Components
Top Content
There has been no shortage of both fair and unfair criticism toward Web Components from a wide range of folks that build for the web, including but not limited to JavaScript Framework authors in supposed competition with the platform. In this talk I'll show you how to navigate and simplify the multifaceted landscape of web components, satisfying common criticisms and showing how you can Use the Platform most effectively today.
It's Time to De-Fragment the Web
React Day Berlin 2022React Day Berlin 2022
34 min
It's Time to De-Fragment the Web
Top Content
Over the past few years, the number of web frameworks available to us has exploded. In some ways, the breadth of choice is a clear win for our ecosystem. However, for many of us, it also comes with harsh drawbacks: - Have you ever used a popular open-sourced component built for framework A, and wished it existed in framework B? What about a design system library? - Does your company have frontends built in different frameworks, and your web teams are frustrated about the wasted hours needed to achieve a consistent design system? - Does your team build SDKs for web frameworks, and must manually re-write them for each framework? The solution to all 3 of these problems exists today. To fully understand it, we must first examine today’s web frameworks, re-think what a component should look like, and introduce a new Intermediate Representation of our components. This is what we have done at Builder.io when we created Mitosis, and we’re excited to share it with everyone.
Web Components, Lit and Santa 🎅
JSNation Live 2021JSNation Live 2021
28 min
Web Components, Lit and Santa 🎅
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 🎅
Immutable Web Apps
JSNation 2022JSNation 2022
20 min
Immutable Web Apps
Resolving dependencies when they are all bundled together is easy. Resolving dependencies when they are in being loaded via script tags is much more challenging. The goal of this talk is to explain how Meltwater handles dependency resolution when building native Web Component based applications that rely on packages published by many different teams.
Web Components are awesome!
JSNation 2022JSNation 2022
10 min
Web Components are awesome!
Ever wondered how by placing "video" or "audio" into your HTML, you get a media player with controls included? Or how, depending on the type attribute, "input" can be a button, a place to enter text, select a date or file, color picker and more? What if you could create your own element? The answer: Web Components! 🤯 In this talk, we’ll take a look at what Web Components are, how to make one and include it into an application.
Let's talk about Web Components
React Advanced Conference 2021React Advanced Conference 2021
32 min
Let's talk about Web Components
Before the dawn of some of the most popular frameworks (read: React and Vue), there was Web components. Web Components take one of the best parts of these frameworks (reusable components) and combine it with the best parts of web development (native browser support and not needing to set up a build process). As if that's not enough, web components allow you use the same functions across any framework.If at this point, you're wondering "If web components are so awesome, why haven't I heard about them before?", then you're in luck because that's exactly what this talk is about.In this presentation, we'll take a look at what web components are, why web components are awesome, why web components can be a pain and how we can use web components both as a standalone tool and together with frameworks.

Workshops on related topic

Web Components in Action
JSNation Live 2021JSNation Live 2021
184 min
Web Components in Action
Workshop
Joren Broekema
Alex Korzhikov
2 authors
The workshop extends JavaScript programming language knowledge, overviews general software design patterns. It is focused on Web Components standards and technologies built on top of them, like Lit-HTML and Lit-Element. We also practice writing Web Components both with native JavaScript and using Lit-Element. In the end we overview key tooling to develop an application - open-wc.