Elevando la Privacidad y Accesibilidad

Rate this content
Bookmark

En React, Elevar el Estado es un concepto fundamental. El objetivo de esta charla es abordar dos preocupaciones muy importantes en nuestro entorno: la privacidad y la accesibilidad, y cómo podemos lograrlo y construirlo desde los componentes.


Esta charla mostrará mi trabajo con un pequeño componente de código abierto y su evolución para abordar la privacidad y la accesibilidad con la ayuda de la comunidad y cómo nosotros, como desarrolladores, debemos preocuparnos y ofrecer lo mejor para las personas que utilizan nuestras herramientas, incluso en el componente más simple.

25 min
21 Jun, 2022

Video Summary and Transcription

En esta charla, el orador discute la creación de una biblioteca de componentes que prioriza la accesibilidad y la privacidad. Destaca la importancia de construir aplicaciones que se adapten a los dispositivos y limitaciones de red de los usuarios. El orador comparte su experiencia en la resolución de problemas de rendimiento con un iframe de YouTube e introduce Light YouTube, un componente web enfocado en el rendimiento. Enfatiza la necesidad de priorizar la accesibilidad y la privacidad en las aplicaciones y brinda ideas sobre cómo abordar problemas comunes. La charla concluye con un llamado a priorizar la accesibilidad y crear valores predeterminados sensatos en las bibliotecas para mejorar la experiencia del usuario.

Available in English

1. Introducción

Short description:

En esta charla, discutiré cómo creé una biblioteca de componentes que prioriza la accesibilidad y la privacidad. Ser parte del Comité de la Cumbre de React y de la comunidad global nos permite intercambiar ideas y ofrecer mejores experiencias de usuario.

♪♪♪ Olá y hola y bienvenidos a esta charla, Mejorando la Accesibilidad en la Aplicación de Privacidad. Es realmente genial estar aquí, como parte del Comité de la Cumbre de React. Esta es una historia de comunidad, porque hablaré sobre cómo creé, hace años, una biblioteca de componentes que, en el camino, con la ayuda de la comunidad, incorporamos la accesibilidad pero también la privacidad, convirtiendo esta biblioteca de componentes no solo en más accesible, sino con privacidad por defecto. Es realmente genial ser parte de esta comunidad global donde podemos compartir e intercambiar ideas, código, y ayudar a ofrecer una mejor experiencia de usuario. Creo que esto es parte de la magia del código abierto, y es la magia de conferencias como esta, que nos permite ver otras historias, ver nuevos desarrollos, y compartir lo que sabemos y ver lo que otras personas están construyendo allá afuera.

2. Introducción a CDK

Short description:

Soy Ibran Cesar, un constructor de la comunidad de AWS y un fanático explícito de TypeScript. CDK, una forma de escribir infraestructura como código, tiene el potencial de ser tan impactante como lo fue jQuery para los desarrolladores front-end.

Soy Ibran Cesar. A veces solo me llaman Ibra. Soy un constructor de la comunidad de AWS. Soy un fanático explícito de TypeScript. Es mi herramienta principal para construir cualquier cosa. Y debido a eso, realmente soy, realmente un fanático de CDK. Es una forma de escribir tu infraestructura como código en tu lenguaje, como TypeScript en mi caso, pero podría ser Python y otros. Y creo que tiene el mismo potencial que jQuery cuando comenzó porque para mí, jQuery fue un punto de inflexión en la web porque permitió mucho a los desarrolladores front-end, y creo que CDK jugará el mismo papel en el espacio de la nube.

3. Creating the Library

Short description:

Comenzaré con una pequeña historia sobre por qué creé la biblioteca en el espacio de Flare. En 2018, tuve la suerte de estar en la Cumbre de la Web de Chrome, donde enfatizaron la importancia de construir aplicaciones que se adapten a los dispositivos y limitaciones de red de los usuarios. Esto resonó conmigo, ya que en Brasil a menudo tenemos que desarrollar para teléfonos inteligentes de gama baja y conectividad limitada. Me di cuenta de la necesidad de priorizar la accesibilidad y el rendimiento, lo que me llevó a crear la biblioteca.

Pero basta de hablar de mí y de lo que veo o me gusta para la web en general. Comenzaré con una pequeña historia sobre por qué creé la biblioteca en el espacio de Flare. En 2018, tuve la suerte de estar en la Cumbre de la Web de Chrome. Fue una experiencia realmente genial donde pude ver y participar en la conferencia en San Francisco. Y uno de los momentos que más me sorprendió fue cómo estaban hablando de comenzar a observar cómo los usuarios realmente usan nuestras aplicaciones en lugar de, ya sabes, construir para nosotros mismos o, ya sabes, computadoras con alta potencia o teléfonos inteligentes de gama baja. Y para mí fue un poco difícil este tipo de discurso, porque en Brasil siempre tuvimos que desarrollar para este tipo de equipos. La gente usa teléfonos realmente básicos o teléfonos inteligentes muy básicos con capacidades limitadas. Así que ver que solo en 2018 estaban prestando atención a esto fue un poco impactante para mí, porque desde entonces siempre pensé que realmente estaban investigando esto. Pero de todos modos, fue un movimiento realmente genial, diría yo. Y vi con mucho cuidado que promovieron esta forma de respetar el hardware y la red de los usuarios, ambos problemas a los que nos enfrentamos aquí en Brasil todos los días, para que las personas accedan a información, servicios y cosas que les permitan acceder plenamente a Internet.

4. Solving Performance Issues with YouTube Iframe

Short description:

Estaba resolviendo los problemas de rendimiento de un sitio web con varios componentes, incluido un iframe de YouTube. Inicialmente pensé que el problema era culpa mía, pero resultó que el iframe de YouTube tenía una carga enorme que ralentizaba el sitio web. En un evento, conocí Light YouTube, un componente web centrado en el rendimiento que carga el iframe solo cuando el usuario interactúa con él.

Estaba resolviendo eso y pensando en todos los problemas que tenía todos los días para construir una aplicación para entregar noticias a las personas aquí en Brasil. Teníamos este sitio web realmente grande con muchos componentes en la página principal, teníamos más de 150 piezas de contenido que iban desde imágenes, texto, títulos y cosas así, y teníamos solo un iframe de YouTube. Estaba buscando obtener la mejor puntuación en Lighthouse y cosas así, y estaba resolviendo algo de lo que no estaba realmente seguro si era culpa mía, y estaba pensando para mí mismo, creo que el problema es el iframe, pero al mismo tiempo estaba pensando, bueno, ellos son Google, ¿verdad?, ellos no proporcionarán algo que, ya sabes, disminuya mi rendimiento. Entonces, es obvio que es algún tipo de error por mi parte, pero esto no es lo que realmente es cierto.

5. Optimización de rendimiento y mejora de privacidad

Short description:

El iframe de YouTube tiene una carga enorme que ralentiza los sitios web. Light YouTube es un componente web centrado en el rendimiento que carga el iframe solo cuando el usuario interactúa con él. Comencé a portarlo a React y a aplicar las mejores prácticas. Se agregó un modo de mejora de privacidad y ahora es el valor predeterminado. Los comentarios de la comunidad han ayudado a mejorar la biblioteca y crear mejores experiencias de usuario.

Como se señaló en el mismo evento, el iframe de YouTube tiene una carga enorme, no solo carga los scripts para el video en sí, sino también para la red de publicidad, para el seguimiento que necesitan y otros tipos de tareas que deben ejecutarse en el hilo principal, lo que pone una carga pesada en el hilo único y ralentiza por completo el sitio web, incluso el lugar que estábamos colocando en nuestra página de inicio. Y en el mismo evento presentaron estos componentes web que llamaron Light YouTube. Light YouTube era una forma de proporcionar videos realmente enfocados en el rendimiento. Era más de 200 veces más rápido que la carga de la página con el uso de este elemento personalizado. ¿Qué hace? En realidad, lo que hace es tomar la imagen para un ID de video, porque puedes obtener estáticamente la imagen para un video si conoces el ID, y solo coloca la imagen y carga el iFrame solo cuando los usuarios quieren interactuar con él, con el mouse y el botón de reproducción. Entonces, cuando el usuario inicia estas acciones, en segundo plano comienza a cargar el iFrame y presenta al usuario el video que desean ver. Pero todas las URIs se cargan con la directiva Per-Load, lo que deja el hilo único libre para que su página se cargue más rápido.

Y debido a eso, desde que regresé a Brasil, comencé a portarlo a React, porque para mí era realmente algo que me molestaba. Y creo que sería realmente genial compartir este tipo de trabajo con otras personas. Esa presentación de Paul Irish fue realmente genial para mí y me mostró, ya sabes, el camino hacia el código abierto. Desde entonces, solo estaba trabajando en algunos problemas menores de paquetes de otras personas, pero desde que publiqué esta pequeña biblioteca, cada vez más estoy creando mis propias bibliotecas y componentes. Y ¿por qué es tan importante de lo que estoy hablando? Creo que una de las cosas que desde el principio, coloqué en la biblioteca fue, ya sabes, hacer cumplir algún tipo de mejor práctica, como, ya sabes, tenía un ID para obtener el ID del video que se usa tanto en la referencia de imagen como en la ruta y el título, porque para generar y que la imagen sea más accesible, debe ser un texto alternativo. Entonces, a propósito, hice que fuera obligatorio no solo poner el ID sino también el título porque creo que cuando implementamos este tipo de rieles anchos, hacemos una mella en la forma en que los desarrolladores abordan sus implementaciones.

Algunos meses después de mi primer lanzamiento, recibí esta solicitud de extracción en la que un usuario agregó esta opción para usar un modo de mejora de privacidad. Utiliza una directiva de no-cook que YouTube proporciona para que las personas decidan si quieren o no que su iFrame obtenga información de usted en ese lugar porque está en el sitio web de otra persona y no desea que, ya sabes, Google omita el seguimiento de las personas allí o la persona que estaba en nuestro sitio web en ese momento no quiere ser rastreada. Es una opción que las personas deberían tener, ¿verdad? Y no sabía que existía este tipo de opción antes de esta solicitud de extracción. Pero desde que la recibí, no solo la vi como una buena opción, sino que meses después decidimos poner esto no solo como una opción, sino definido a propósito como una privacidad predeterminada. Porque hay este libro, Noti, que habla sobre cómo las personas reaccionan en una conferencia de React. Es algo divertido de decir. Pero Noti habla sobre cómo los pequeños valores predeterminados pueden ayudar a las personas a tomar una mejor decisión para la comunidad en su conjunto. Como si las personas donaran sangre por defecto, o sus órganos, en ese sentido, de hecho, el país tendría más donantes porque si las personas tuvieran que decir prácticamente: quiero ser donante de órganos, no lo harían y dirían menos, no quiero ser donante. Entonces, solo las personas que realmente se oponen a ser donantes de órganos podrán tener esta opción. Pero, inducir a las personas a tomar mejores decisiones para el bien de todos, es el propósito de crear este tipo de barreras de protección. Y otra cosa, fue un problema que un usuario abrió, ya sabes, encontró un error de blanqueo SSS en la biblioteca que estaba usando un GV cuando necesitaba usar un botón, es un problema muy común. Y siempre uso el elemento correcto y tengo que, ya sabes, poner algo en su lugar para que el contenedor no sea interactivo y para mí fue realmente genial ver los comentarios de la comunidad después de solucionar el problema, porque no solo las personas, no solo una persona, ya sabes, se quejaba y cómo con poco esfuerzo a veces podemos marcar una gran diferencia en la experiencia de alguien. Y para mí, mostrar cómo esta frase es realmente genial para pensar en cada decisión que tomamos en nuestros componentes, en nuestras aplicaciones y cómo podemos comenzar a pensar en mejores formas de proporcionar una mejor experiencia de usuario desde cero, desde nuestros componentes, como en esta biblioteca. Las buenas intenciones nunca funcionan. Necesitas buenos mecanismos para hacer que cualquier cosa suceda. Creo que esta es una gran cita de Jeff Bezos, porque habla de que todos tenemos buenas intenciones, ¿verdad? No creé mi biblioteca pensando en usar Jib solo porque sí, no quiero ser

6. Priorizando Accesibilidad y Privacidad

Short description:

Necesitamos priorizar la accesibilidad y privacidad en nuestras aplicaciones. Al implementar comprobaciones en nuestras aplicaciones TypeScript, podemos abordar estos problemas de manera efectiva. Muchos problemas comunes en nuestras aplicaciones, como el bajo contraste, la falta de texto alternativo para imágenes y los enlaces vacíos, se pueden corregir fácilmente. React y otros frameworks pueden tener más errores de los que nos damos cuenta, lo que destaca la necesidad de centrarse en las experiencias de usuario y la accesibilidad desde el principio. Leer la documentación y seguir el hashtag #A11y en Twitter puede proporcionar ideas valiosas y ayudarnos a ofrecer mejores experiencias de usuario. Prioricemos la accesibilidad y creemos valores predeterminados sensatos en nuestras bibliotecas para hacer de la web un lugar mejor para todos.

accesible para las personas. No, simplemente no sabía mejor en ese momento. Y necesitamos un mecanismo para hacer que algo de esto suceda. Creo que si lo integro en mi componente, los desarrolladores que lo usen se beneficiarán de este tipo de decisiones. Entonces, para esto, las aplicaciones serán un poco más accesibles y generarán más conciencia al respecto. Y creo que cosas como esa, como, ya sabes, la extensión de accesibilidad es genial. Pero ¿qué tal si tuviéramos este tipo de comprobación en nuestras aplicaciones de typescript, como en el caso del componente? Que realmente deberíamos realizar para abordar los problemas relacionados con la accesibilidad y la privacidad. Sería un mecanismo, no solo, ya sabes, confiar en nuestras buenas intenciones que estoy seguro de que todos tendremos. Y cuando ves, ya sabes, las estadísticas de las 1 millón de páginas principales, puedes ver que muchos de los principales problemas en nuestras aplicaciones son fácilmente corregibles, como, ya sabes, el bajo contraste entre texto y colores, la falta de alternativas para imágenes que creo que fácilmente podemos, ya sabes, encontrar formas de evitar enlaces vacíos, etiquetas de entrada faltantes, botones vacíos, falta de idioma del documento. Creo que si dedicamos un poco más de esfuerzo en nuestros componentes, en nuestras bibliotecas, realmente podemos proporcionar una mejor experiencia de usuario. Y si ves el mismo informe, nos muestra que React en sí no es, ya sabes, como tiene casi el mismo tipo de problemas que, ya sabes, cualquier otra página. Puedes ver que Angular tiene el mismo número promedio de errores, pero puedes ver que algunas bibliotecas que consideramos, ya sabes, de mejor rendimiento, como React, tienen muchos más errores en comparación con, ya sabes, React o comparando, ya sabes, con otros tipos de frameworks como WordPress y Laravel. Creo que esto puede mostrar que a veces nos enfocamos tanto en una parte de nuestra aplicación que perdemos de vista que la experiencia de usuario no es una sola cosa. No se trata solo de interacciones rápidas. No es solo una cosa. Cuando hablamos de la experiencia de usuario, tenemos que hablar en plural. Tenemos que hablar de experiencias de usuario y para llegar a más personas, debemos tener accesibilidad desde el principio, porque cuando obtienes los números de personas que tienen algún tipo de problema, y esto puede incluir incluso a personas que leen en dispositivos de gama baja, que necesitan un mejor contraste en el teléfono, verás que no es un problema que afecta a un pequeño porcentaje de tus usuarios. Y diría que leas la documentación, la documentación es realmente genial, verás que cuando uses jiv y uses roles, de hecho, si usas los elementos correctos de HTML, obtienes todo por defecto, ves las formas correctas de usar secciones y cosas así, a veces la gente piensa que solo usando secciones en lugar de jiv se resuelve el problema y no es exactamente así, si lees los documentos de Db3 verás que es una lectura mucho más amigable, creo que es muy amigable y aprenderás mucho y sigue el hashtag A11y en Twitter para la accesibilidad, ya sabes, verás varios usuarios y tweets sobre este tema y formas que te ayudarán no solo a crear un mejor código sino a ofrecer una mejor experiencia de usuario. Y no te equivoques. Muchos de los problemas de accesibilidad también son problemas semánticos con tu código. Y me gustaría dejarles con el mensaje, depende de ti, depende de nosotros dar a los usuarios una mejor experiencia al usar nuestras aplicaciones. Y si, desde el principio, al crear nuestras bibliotecas, por pequeña que sea nuestra biblioteca, creo que si pensamos y creamos valores predeterminados sensatos, creamos mecanismos para que las personas ofrezcan experiencias accesibles y privadas por defecto, creo que haremos una web mejor y brindaremos una mejor experiencia para todos en la web y en nuestras aplicaciones de React. Quiero agradecer a React Summit por tenerme y crear una web mejor para todos. Adiós. Ciao.

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

React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Summit 2022React Summit 2022
147 min
Hands-on with AG Grid's React Data Grid
WorkshopFree
Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.- Getting started and installing AG Grid- Configuring sorting, filtering, pagination- Loading data into the grid- The grid API- Using hooks and functional components with AG Grid- Capabilities of the free community edition of AG Grid- Customizing the grid with React Components