Café con Tech

Modern CSS with Stephanie Eckles

September 06, 2021 Matias Hernández / Stephanie Eckles Season 3 Episode 8
Café con Tech
Modern CSS with Stephanie Eckles
Chapters
Café con Tech
Modern CSS with Stephanie Eckles
Sep 06, 2021 Season 3 Episode 8
Matias Hernández / Stephanie Eckles

Today I had the joy of talking about CSS and a11y with the amazing Stephanie Eckles.
Stephanie is a Frontend focused software engineer author of ModernCSS.dev, where you can find in-depth tutorials about modern solutions to old CSS problems. She is also the creator of Style StageSmolCSS, and 11ty.Rocks.

And if that is not enough, Stephani is also writing a lot, teaching as an egghead instructor, and podcasting in here  Word Wrap podcast.

In this episode, we revised some of the CSS pitfalls and tried to answer why CSS was so neglected?. We talk about some of the new developments around the CSS world and also chatted about the forgotten work around accessibility and why it's important to do our work in that realm.

Find Stephanie on Twitter and her site, and don't forget to check out her amazing content.

Music Credits
Opening and Outro Music
by DanoSongs https://danosongs.com/
Background Music Music:
Iron Bacon by Kevin MacLeod
Link: https://incompetech.filmmusic.io/song/3925-iron-bacon
License: https://filmmusic.io/standard-license


Auth0
Auth0 es una plataforma de autenticación y autorización lista para usar en tu app!

Cloundinary MDE
Energizing a diverse community of developers to share knowledge using media technology in web apps.

Escuela Frontend
Conviértete en un Frontend Dev Profesional Contenido de alta calidad para mejorar tu carrera!

Support the show (https://www.buymeacoffee.com/matiasfha)

Show Notes Transcript

Today I had the joy of talking about CSS and a11y with the amazing Stephanie Eckles.
Stephanie is a Frontend focused software engineer author of ModernCSS.dev, where you can find in-depth tutorials about modern solutions to old CSS problems. She is also the creator of Style StageSmolCSS, and 11ty.Rocks.

And if that is not enough, Stephani is also writing a lot, teaching as an egghead instructor, and podcasting in here  Word Wrap podcast.

In this episode, we revised some of the CSS pitfalls and tried to answer why CSS was so neglected?. We talk about some of the new developments around the CSS world and also chatted about the forgotten work around accessibility and why it's important to do our work in that realm.

Find Stephanie on Twitter and her site, and don't forget to check out her amazing content.

Music Credits
Opening and Outro Music
by DanoSongs https://danosongs.com/
Background Music Music:
Iron Bacon by Kevin MacLeod
Link: https://incompetech.filmmusic.io/song/3925-iron-bacon
License: https://filmmusic.io/standard-license


Auth0
Auth0 es una plataforma de autenticación y autorización lista para usar en tu app!

Cloundinary MDE
Energizing a diverse community of developers to share knowledge using media technology in web apps.

Escuela Frontend
Conviértete en un Frontend Dev Profesional Contenido de alta calidad para mejorar tu carrera!

Support the show (https://www.buymeacoffee.com/matiasfha)

Español
 
[00:00:00] Matias: Bienvenidos a nosotros no importa qué número de episodio es este de Cafe con tech hoy conmigo, tengo una Stephanie Eckles ella es, un CSS moderno dev autor de una etapa de estilo de es un instructor egghead un podcaster, ingeniero de software.

Sí. Nómbralo ahí. Ella está haciendo mucho trabajo en el lado del front-end del mundo. Bienvenida Stephanie. Gracias por venir.

[00:00:27] Stephanie: Muchas gracias. 

[00:00:30] Matías: Así que siempre digo que he hecho un trabajo muy pobre en las presentaciones. Así que te invito a presentarte, a que la audiencia te conozca.

[00:00:40] Stephanie: Sí, ciertamente. Así que sí, soy un ingeniero de software de enfoque frontal, y he estado trabajando en el desarrollo web por más de una década en este punto. Y CSS es una especie de mi tema de especialidad, pero cualquier front-end, incluyendo Me verás hablando mucho sobre HTML, la semántica y ser un defensor de la accesibilidad y el tipo de más recientemente y defensor de JAMstack y, en particular, el generador de sitio estático eleventy.

Pero sí, no soy un diseñador. Así que cuando me acerco a CSS realmente trato de hablar de los aspectos prácticos de la misma tratando de ayudar a la gente a aprender más acerca de lo que puede hacer. 

De acuerdo. 

[00:01:23] Matias: Es realmente interesante. Los temas en los que te centras porque de alguna manera la situación actual del desarrollo front-end está tan centrada en JavaScript y toda la potencia que, que te puede dar un typescript y la gestión de estados, y luego todos los temas. Entonces la otra parte que son realmente importantes para la creación de UIs.

Son completamente olvidados como el CSS y la accesibilidad. Así que eso, eso será el foco principal de esta conversación. Y estoy muy interesado y moderno CSS. Pero para entrar en eso, quiero preguntarte por qué crees que CSS es tan descuidado en su ingeniería front-end o desarrollador.

[00:02:11] Stephanie: Excelente pregunta. Y, ya sabes, sólo puedo hablar de mis experiencias que son experiencias basadas en Estados Unidos. Y no sólo eso, sino que yo personalmente no estoy ubicada en los centros de tecnología, no estoy en San Francisco o ni siquiera en la costa, estoy en el medio de los EE.UU. donde no somos exactamente conocidos por la tecnología para empezar.

Así que sólo quiero asegurarme de que la gente sepa de dónde vengo con mi perspectiva. Pero creo que en base a mi propia experiencia, pero también lo que veo a otras personas hablando de la parte delantera. Una profesión es un poco descuidada, ¿verdad? No se ve como valiosa en realidad, ya sabes, cuánto se paga a la gente.

Pero también valioso en términos de, ya sabes, esas personas en su equipo y lo que aportan a la mesa, que es mucho. Y, cuando, a su punto, cuando nos fijamos en como un ingeniero de la parte delantera, por lo general están siendo contratados para hacer JavaScript y es casi visto como usted tiene que tener esa habilidad para hacer el grado de la paga que le gustaría.

Afortunadamente creo que estamos empezando a ver. Algunas funciones que surgen como ingeniero de diseño o, o ingeniero de experiencia de usuario. Hay algunos títulos, diferentes títulos que he visto. Normalmente están relacionados con equipos de experiencia del cliente o equipos de diseño de sistemas. Así que hay un lugar para la gente que está más interesado en esa parte y no necesariamente tienen que saber.

JavaScript o no necesitan conocerlo en profundidad. Y yo caigo en ese grupo. No lo conozco profundamente. Sé lo suficiente para hacer el tipo de conjunto estándar de cosas que necesito hacer. Y así, sé que también he visto a la gente hablar mucho de ello. Sí.

No es una prioridad y los campamentos de entrenamiento, lo cual es súper desafortunado.

Creo que va de la mano caso tanto para el CSS y la semántica, y luego, en consecuencia, que los impactos o no alguien está familiarizado con la accesibilidad. Así que una especie de combinación de cosas. 

[00:04:11] Matías: Sí. Mencionaste algo así como que el proceso de contratación está completamente enfocado en Javascript. Superpoderes como unicornios en Javascript. Y entonces entonces los bootcamps obviamente se enfocaron en eso y el colegio o la universidad se está enfocando. No sé, lo que sea, otra cosa, pero hace años antes del auge de los nuevos frameworks en Javascript había una especie de rollo que, digamos para, para la gente que estaba trabajando en HTML y CSS y la gente que trabaja en Vanilla Javascript

y luego se puede combinar que porque confían en que la diferencia entre este trabajo que estamos realmente mercado realmente visible. Como esta gente escribe. CSS en el buen sentido. Y esta gente, escribir, Javascript, a continuación, sólo poner todo junto. Puedo recordar cómo la gente lo nombra, eso, pero funciona, pero luego vino react o tal vez backbone, antes, pero vino react y angular vino y la línea de CSS borrosa

y ahora estamos escribiendo nuestro CSS dentro de JavaScript. Así que cómo una persona sólo puede centrarse o principalmente centrado en CSS. Si al final todavía es necesario profundizar en el, o cualquier otra biblioteca de componentes que está utilizando.

[00:05:34] Stephanie: Sí.

En mi caso, lo que me ha ayudado a mantener esa mayor. Ver es familiarizarse con la accesibilidad. Creo que eso. Parte de lo que hace que sea un reto o abrumador pensar en tener que saber todas esas cosas. En primer lugar, ya sabes, para cualquier, ya sabes, la gente más joven que podría, ya sabes, aquí, esto es, usted no tiene que saber todo a la vez en este momento, independientemente de lo que está usted está tomando o lo que el camino que está tomando.

Los campamentos de entrenamiento y otras cosas pueden hacer que parezca eso. O pueden profundizar en un tema. Sabes, yo busco cosas en Google todos los días. Ayer me quedé atascado porque no recordaba que las promesas eran una cosa en JavaScript. Sí, claro. Porque no lo uso todos los días. Así que teniendo eso en mente, no tienes que saber todo de una vez y ciertamente tampoco tienes que recordarlo todo el tiempo.

Creo que si usted está aprendiendo JavaScript o CSS Si usted puede si usted puede ser capaz de mantener las ideas generales de lo que quieres hacer, por ejemplo, sabiendo que alguna característica existe, entonces usted puede ir y encontrar los recursos, derecho. Para ayudarte a atacar un problema en el futuro. Y todo el mundo hace esto, cierto.

Nosotros, ninguno de nosotros puede. Una gran mayoría de nosotros no puede sentarse y completamente como sin código perfecto sin tener que buscar una sola cosa. Bien. Así que creo que la gente mira CSS es abrumadora. Y yo estaba pensando en esto a principios de esta semana. Que es un poco divertido porque JavaScript es un lenguaje gigante también, especialmente cuando se lanza en todos los marcos.

¿No es así? Así que incluso si nos fijamos en un subconjunto de JavaScript, que es muy crítico. Como trabajar con Arrays o trabajar con objetos, incluso con eso, podemos ver en Twitter, ya sabes, hay un hilo recientemente sobre cómo hacer un bucle sobre los datos e incluso sólo eso causó un gran revuelo. Así que, ya sabes, CSS es extrañamente visto como demasiado difícil, demasiado abrumador, pero mientras tanto, JavaScript tiene algo similar.

Ya sabes, las cosas, es un lenguaje diferente. Cumple una función diferente, por supuesto, pero sigue teniendo partes abrumadoras y tampoco se espera que conozcas todo JavaScript como lenguaje. Así que familiarizarse con ambos te permite encontrar una solución más eficiente, y que será más mantenible.

eso es cierto independientemente del idioma. Así que creo que a veces nos quedamos atrapados en saber, cosas un poco tontas al respecto, pero realmente. Lo mejor que podemos pedirnos a nosotros mismos y a nuestros compañeros de trabajo y a todos los demás es seguir aprendiendo y no tener miedo de buscar respuestas cuando las necesites. 

[00:08:04] Matías: Sí. Sí. Google es algo así como mi aliado. I, 

En realidad, tengo dos pantallas sobre todo porque cuando uno google y el otro, tengo código VS. 

Así que, lo que es un poco divertido tal vez es que la mayoría de las empresas son más, la mayoría de los equipos de buscar esta implementación de píxeles perfecta de ese diseño, pero no busca el conocimiento de CSS o personas conocedoras.

Así que va a, ¿cómo quieres este resultado sin tener la entrada correcta? Discutir casi imposible. Y también CSS es, como usted ha mencionado, realmente grande, pero esto es, pero también no es totalmente lenguaje de programación de características, por lo que es una especie de en el medio. Y a veces es difícil entender cómo abordar las cosas.

Al igual que estoy completamente seguro de que la mayoría de los desarrolladores que escriben CSS ni siquiera sabe cómo funciona bajo el capó. Cómo funciona la cascada por qué 

[00:09:10] Stephanie: Sí. 

[00:09:11] Matias: cosas 

[00:09:11] Stephanie: Sí. 

[00:09:12] Matias: como sucede. Entonces como se enseña CSS a alguien que ya sabe un poco. Yo creo que eso sería la gente que sabe algo.

Son los más difíciles de enseñar algo

[00:09:26] Stephanie: sí.

Es una perspectiva interesante. Y creo que cuanto más se puede. Relacionar las cosas con los casos de uso práctico en lugar de, ya sabes, usted para CSS, especialmente. Creo que una cosa que hace que sea abrumador como usted ve la gente haciendo arte con él. Sí, es cierto. Y es hermoso y es increíble. Y estoy tan, tan impresionado por la gente que hace eso. Sí.

por supuesto. Sí, claro. Eso es impresionante que es una salida creativa, pero que puede ser abrumador si usted fuera como, bueno, ¿qué es lo que realmente necesito saber de la lengua también? Como has dicho, lograr este diseño que es realmente sólo cajas dispuestas en una cuadrícula, tal vez algunas imágenes, ya sabes, y creo que eso es donde trato de hacerlo más accesible es vamos a dividirlo en eso.

Como en última instancia, tenemos cajas, estamos preocupados por la alineación y luego tipo de capa en. Las otras cosas que necesitas saber desde un ángulo muy práctico. Así que trabajando con el diseño responsivo de las imágenes y sólo introduciendo esas propiedades de estilo más extravagantes cuando realmente lo necesitamos. Y algunos de ellos, ya sabes, cuando miramos lo que está disponible para nosotros, una gran cantidad de ellos ha sido en los últimos años que tenemos apoyo.

Y creo que esa es la otra área en la que la gente se confunde y, y, ya sabes, no están seguros de lo que elegir como la respuesta correcta, porque siempre también tenemos que preocuparse por y no tenemos exactamente Babel para CSS o algo donde, ya sabes, podemos, tenemos, Autoprefixer donde añade automáticamente cualquier prefijos de proveedores, como el kit web que es útil, ya sabes, pero eso es una especie de la única herramienta y no es, que lo que se escribe.

Automáticamente funciona en otros navegadores necesariamente incluso con eso disponible. Así que hay desafíos adicionales. Y eso puede ser frustrante. Creo que es cuando empezamos a, usted sabe que usted utiliza bootstrap o algunos de estos marcos que es parte de su atractivo. Como han resuelto algunos de esos problemas, puedes confiar en que te den una solución para esas cosas tan fundamentales.

Y luego sólo tiene que preocuparse de añadir su marca o. Un poco de magia extra encima. Dependiendo de 

[00:11:34] Matías: Sí. 

[00:11:34] Stephanie: solicitud viene de y su Así que es interesante.

[00:11:40] Matias: Yo vengo de la época en la que desarrollamos la maquetación con HTML, con tablas HTML sí. Hace mucho tiempo y bordes con imágenes y ese tipo de cosas. Y luego nos lanzamos a usar divs por todos lados y luego bootstrap para todo, y luego luchamos contra bootstrap y luego tratamos de Sentir los agujeros del lenguaje de programación usando less o sass.

Y después 

[00:12:06] Stephanie: Sí. 

[00:12:07] Matias: entonces tratando de entender el modelo de caja o el nombre. Y después de entender eso. Estaba recién vestido. Sí. Son capaces de escribir CSS útil entendiendo lo que estoy haciendo, entonces poco a poco llegó flex y fue raro. 

[00:12:27] Stephanie: Sí. 

[00:12:28] Matias: raro. Y luego llegó grid y eso es increíble. es difícil mantenerse al día con lo que está pasando en este mundo css ahora mismo.

Aquí es donde viene, soluciones CSS modernas y un pequeño CSS dos del contenido de sus sitios. ¿qué puedo encontrar en CSS moderno o por qué llamarlo moderno?

[00:12:51] Stephanie: Sí, es una buena pregunta. Así que css.dev moderna es donde tengo Do tengo, tengo como 28, creo que ahora mismo. Son, son bastante largos en tutoriales. Pero están abordando diferentes temas, temas prácticos donde. Para abordar exactamente lo que usted, usted dijo que CSS se ha movido tan rápido como un lenguaje en los últimos años, que si usted ha sido dependiente de los marcos o, ya sabes, has estado en el mundo de JavaScript o lo que sea, otro tipo de, ya sabes, el lado de la casa de programación y que ha estado trabajando en si usted no ha mirado en un tiempo, que definitivamente han perdido algunas cosas que puede hacer y que puede hacer mucho más simple.

Antes era así. Básicamente estamos en un lugar impresionante donde con el CSS moderno, tenemos mucho menos hacks que tenemos que implementar para lograr cosas que eran bastante dolorosas en el pasado. Definitivamente. Así que surgió de, ya sabes, mis propias experiencias de haber tenido que enfrentar esos desafíos y mirar con ojos frescos y lo que CSS proporciona ahora como un lenguaje más maduro y como un lenguaje que es.

Se está moviendo muy rápido ahora mismo. Se verá aún más diferente en dos meses, seis meses dentro de un año. Porque es sólo en un estado muy rápido de desarrollo en este momento. Es muy emocionante, pero también es más difícil mantener el ritmo. Y sobre todo si se quiere, son todavía, ya sabes, preocupado por ella, un poco más de soporte de legado, pero creo que eso también va a cambiar.

En un par de meses, cuando yo 11 no es tanto de un desafío para ciertas partes del mundo. Así que siempre hay nuevos retos para, ya sabes, tener en cuenta algunas de estas cosas más antiguas, pero también definitivamente tratar de abrazar, o al menos como he mencionado antes, ser conscientes de lo que es posible para que al menos tengas una idea de lo que podría ser una solución.

Cuando se te pide que hagas algo tan moderno CSS te muestra una variedad de soluciones a problemas prácticos comunes. Pero mi objetivo es que, en general, estés más familiarizado con el lenguaje y puedas llevar esas soluciones a tu trabajo diario.

En lugar de ser tutoriales, es un fragmento más centrado en una técnica concreta. Así que sólo una pequeña demostración rápida que te habla de las propiedades modernas de CSS. Por ejemplo, las funciones CSS, cosas sobre la rejilla, cosas sobre flexión, te muestra cómo usarlas y tal vez formas que no has encontrado. Y también de una manera que no tienes que ir a través de un tutorial para obtener esa solución. 

[00:15:39] Matias: Yo también. Los, los colores en el smolcss son 

[00:15:43] Stephanie: Sí, 

[00:15:44] Matías: Incluso el blanco que la luz considera es muy, muy bonito. 

[00:15:51] Stephanie: gracias. 

[00:15:52] Matias: una cosa que la alta estafa considero moderna y 

[00:15:56] Stephanie: Uh huh. 

[00:15:56] Matias: son pocos los temas que siempre me vuelan la cabeza, las posibilidades como las animaciones que realmente solía usar Javascript para hacer las animaciones.

Y eso es realmente difícil en el, en el motor del navegador, pero CSS es el vuelo de escritorio. Es realmente asombroso, pero es difícil entender los cuadros clave y, y, y las transiciones en las informaciones de facilidad y todo eso. Eso es una cosa. 

[00:16:22] Stephanie: De acuerdo. 

[00:16:23] Matias: esas funciones que es bastante nuevo para mi, por lo menos porque conozco calc y todo, eso es todo lo que conozco.

Y, y variables CSS que creo que es una especie de mundo ahora en términos 

[00:16:37] Stephanie: Sí. 

[00:16:37] Matias: sistemas de diseño de sistemas. Pero más que eso, contienen consultas. Eso es algo que está por venir. Esperemos que pronto. Eso es bastante sorprendente. Para tratar de entender lo que nuestras consultas de contenedores y por qué es, son tan malditamente bueno.

[00:16:58] Stephanie: Así que los crays de contenedores son definitivamente algo para crecer. Que es seguro para empezar a entusiasmarse con mi, y lo digo porque ha sido un concepto que ha sido de alrededor de bastante tiempo, pero ahora por fin tenemos un prototipo actualmente en Chrome Canarias. Así que tienes que ir a la configuración de las banderas y elegir para activar eso.

Y sólo Chrome Canary en este momento. Y las canteras de contenedores nos permiten, en lugar de ver la vista. Como lo hacemos para los medios de comunicación. Cory es como todos hemos, ya sabes, envuelto nuestras cabezas alrededor de que probablemente si usted está haciendo cualquier tipo de trabajo de diseño utilizando consultas de los medios de comunicación para ver la ventana gráfica. Ahora, con las consultas de contenedor, se puede ver un lugar específico en su diseño y responder a que de una manera muy similar a los medios de comunicación de Corey, pero ahora se ha reducido y alcance. Supongo que sería la mejor forma de decir que lo has reducido a un elemento concreto y a sus hijos. Así que usted puede adjuntar una consulta contenedor por ejemplo, a un artículo. Y luego, al ver ese artículo.

Cambió el ancho en diferentes entornos. Tal vez es en, tal vez en algunas páginas se permite ir a pantalla completa y en su página de inicio, usted tiene tres artículos en una columna a través de la página. Así que una columna más estrecha. Y por lo que la consulta contenedor le permite cambiar los elementos dentro de ese artículo, ya que cambia con.

Así que las cosas como el tamaño de la fuente, tal vez la adición o eliminación de las fronteras y las sombras de la caja, lo que usted necesita hacer. Así que estás afectando el. Estás viendo el artículo, pero estás cambiando las propiedades de sus descendientes a medida que cambia y lo defines de manera muy similar a la consulta inmediata. Así que en el contenedor, y luego en el paréntesis algo como el ancho de los hombres, cualquier valor que le gustaría usar allí.

Así que esa es la esencia de, de lo que son, es en el prototipo actual. Pero hay muchas más posibilidades que están explorando para ellos también. Cosas muy emocionantes. 

[00:18:52] Matías: Sí. Y en las notas del programa, encontrarás un enlace al artículo sobre consultas de contenedores con CSS grid y Flexbox, que está disponible en moderncss.dev. Así que, sí. Sí, esto es increíble. Y resolverá problemas muy comunes con las consultas de medios y todo eso. Pero yo, pregunta que es una especie de truco, pero.

El CSS está avanzando con bonitas características y cosas que se están extendiendo. Como 

[00:19:26] Stephanie: Sí. 

[00:19:26] Matias: Las variables de CSS tienen un ámbito con las consultas del contenedor es una especie de ámbito. ¿Por qué el CSS no tiene alcance o es modular? ¿Por qué mantenerlo como cascada? Porque uno de los dolores está en las razones de todas las cosas CSS en JS allí.

El módulo se enfrenta. La cosa por qué simplemente no lo hacen así o por qué es bueno tenerlo como, como una cascada.

[00:19:55] Stephanie: Así que tengo buenas noticias de que el alcance está llegando a CSS. 

Así que Mariam Suzanne, que también es esta autora de especificaciones para canteras de contenedores. Sí. Así que especificando el alcance real en CSS, hay dos nuevos conceptos que vienen alcance y también capas, que es un poco más difícil de entender. Así que el alcance te dejaremos definirlo. Lo que está es que se inspiran en los módulos CSS y JS y CSS y demás.

Se están inspirando en eso para llevarlo a CSS una característica nativa, está llegando. 

[00:20:30] Matías: Qué bien.

[00:20:30] Stephanie: Así que sí son Y el grupo definitivamente relojes. Por supuesto, lo que la gente es desafíos. Y así, como he mencionado, es un rápido estado de desarrollo para el lenguaje en este momento. Y por lo que las características son para ser.

Ya sabes, especulado, pero, por supuesto, eso significa que hay un poco de tiempo de espera todavía. Pero lo bueno de esto es, y para la gente que no lo sepa porque yo no lo sabía hace unos meses el grupo de trabajo, el grupo de trabajo de CSS ahora tiene todos sus. Temas y artículos en los que están trabajando, en get hub.

Así que puedes ir a ver lo que está llegando a la lengua y puedes comentarlo y, ya sabes, usar los emojis de get hub para indicar si los apoyas o no. Y de hecho puedes incluso añadir los tuyos propios. Cuestiones contra las diferentes especificaciones que se están desarrollando. Así que no es algo que ciertamente no es un lenguaje anticuado, y también es algo que realmente puede ir a ver lo que está sucediendo y, y sugerir cosas así.

Así que si usted quiere ir a buscar la especificación de alcance, usted podría ver si usted piensa que cumple con las necesidades que le gustaría, tener y, y proporcionar comentarios. Sí, lo que es muy bueno.

Así que. 

[00:21:38] Matias: casi todos los lenguajes están abriendo en su proceso RFC. Así que ahora CSS también, eso es increíble. Así que crucemos los dedos por los navegadores 

[00:21:49] Stephanie: Sí. 

[00:21:49] Matias: velocidad 

[00:21:51] Stephanie: Sí, 

exactamente. 

[00:21:52] Matias: salir. 

[00:21:54] Stephanie: Sí. 

[00:21:56] Matias: Todo esto del CSS es porque queremos una mejor experiencia de usuario. Pero hay una cantidad de población que aún con nuestros mejores esfuerzos en CSS, no consiguen una buena experiencia de usuario porque tienen algunas discapacidades que los evitan también.

Usted realmente utiliza la obligación como pensó que se utilizará como un problema visual o problemas de manipulación. No sé las palabras exactamente. Pero. Accesibilidad. 

[00:22:28] Stephanie: De acuerdo. 

[00:22:28] Matias: el término que, quiero abordar ahora. Qué es la accesibilidad y por qué es de nuevo, la misma pregunta. ¿Por qué se descuida tanto?

[00:22:39] Stephanie: Sí. Así que hay dos términos que verás. La accesibilidad es una especie de término global que verás más a menudo un término relacionado es el diseño inclusivo. Y. La accesibilidad consiste en asegurar que, independientemente de la capacidad del usuario que entra en el sitio, pueda completar las tareas y acceder al contenido de la misma manera que cualquier otra persona.

Capacidades completas. Y así, como has mencionado, a veces se trata de deficiencias visuales y eso es lo que llama mucho la atención. Yo hablo de eso de dos maneras. Nosotros, lo enfatizamos cuando hablamos del contraste de colores. Así que tal vez es, ya sabes, varios grados de daltonismo sería un término familiar donde queremos asegurar que el contraste es lo suficientemente alto.

Puedes leerlo. Y la otra cosa que, que impacta sin embargo y otra. frase que verás es que la accesibilidad es para todos. Así que cuando hablamos del contraste de colores, por ejemplo, eso ayuda a todos. Si consideras las veces que has tenido tu teléfono a la luz del sol y de repente no puedes ver lo que hay en la pantalla sin ir a la sombra.

¿No es así? Así que el contraste es un ejemplo de criterio de accesibilidad que ayuda a todos. También hablamos de discapacidades visuales. Cuando hablamos de la igualdad de acceso al contenido, en términos de los usuarios que son. No tienen vista en absoluto tienen que usar herramientas adicionales como lectores de pantalla sería un término común. Hay otras cosas que esos usuarios pueden tener en las que oyen que se les lee.

También hay usuarios que no pueden utilizar el ratón en absoluto, o cualquier tipo de dispositivos táctiles. por lo que en realidad están hablando, ya sabes, para solicitar. Para, para añadir la interfaz para navegar. Así que hay un montón de diferentes impedimentos que queremos tratar de defenderse. Y eso es una especie de, implicado por la accesibilidad.

Y así, para CSS, por supuesto, hablamos sobre todo de los aspectos visuales, pero hay ciertas propiedades CSS que pueden eliminar, por ejemplo, si usted hace display none elimina lo que ese elemento es para todos los usuarios, que es una especie de interesante. Así que si ocultas el contenido de esa manera, lo oculta de un lector de pantalla y al igual que un usuario visual.

Así que, definitivamente tienen un impacto en, ya sabes, CSS definitivamente tiene un impacto, definitivamente sodas, JavaScript, que sería un tema para un día diferente. Pero, sí, es que hablamos mucho o una de las razones por las que me ves enfatizar la semántica HTML dentro de mis artículos de CSS es que sin esa base sólida sabes, es más probable que termines con una solución menos accesible.

Y la razón es por las herramientas. Los lectores de pantalla esperan ciertos elementos y conocen la información de tu interfaz si utilizas el elemento correcto. Así que si estás usando una casilla de verificación para algo que no tiene nada que ver conmigo en una casilla de verificación, estás dando a ese usuario la información equivocada y puede que no sea capaz de completar cualquier tarea que esté tratando de hacer.

Así que sí. 

[00:25:45] Matias: HTML no es un lenguaje de programación. Es un lenguaje de marcado, pero es muy grande. Y también una evolución y LA, 

[00:25:53] Stephanie: Sí. 

[00:25:54] Matias: cosas al lenguaje, pero la mayoría de nosotros abusando de div y a span. 

[00:26:01] Stephanie: De acuerdo. 

[00:26:02] Matias: y eso es tan de los 90, ni siquiera los hombres, incluso hay muchas más etiquetas realmente básicas. Ese tipo de ayuda a las máquinas para entender nuestro contenido, permitir a la gente a entender nuestro contenido 

[00:26:18] Stephanie: Sí. 

[00:26:18] Matias: un lector de pantalla es una máquina que espera ciertas cosas para poder hacer su trabajo.

Así que cómo, cómo se puede abordar la necesidad de añadir esta capa básica de la accesibilidad en la aplicación que donde. que no importa. Como, esto no es de cara al público y esto es 

[00:26:43] Stephanie: Sí. 

[00:26:44] Matias: Pues lo que sea, pero igual, esto sigue siendo un main, esto sigue siendo un footer. Vamos a ver que Heather. sí, no sé.

Es difícil imponer el uso de la semántica correcta.

[00:26:57] Stephanie: Sí, es interesante. Y es uno que he encontrado en mi posición anterior. Y de nuevo, al menos en los EE.UU., pero me imagino que una cantidad significativa de otras áreas en el mundo, también. usted. Si, si usted piensa de esa manera, si usted está tratando de, ya sabes, salirse con la suya, supongo que sabe, no preocuparse por la semántica, incluso para la aplicación, que significa que usted está posiblemente discriminar a los empleados, por ejemplo, o, básicamente, nunca se sabe quién va a utilizar su aplicación.

incluso cosas como asegurar que su. Aplicación que crees que es una aplicación de escritorio. no hay usuarios móviles porque esta es una aplicación para el servicio al cliente. Ya sabes, representantes de ventas. Bueno, si usted es como yo que es un poco mayor y ahora se encuentra el zoom, ya sabes, si su aplicación ni siquiera responde al zoom, ya sabes, ese es el tipo de barrera que está proporcionando.

Y. Así que es, es un montón de pequeñas cosas que pueden sumar. La buena noticia es que para algo como la semántica esencial, donde estás mencionando, ya sabes, si sólo estás usando dibs, por ejemplo herramientas de pruebas automatizadas, esa es una de las cosas que pueden ayudarte a identificar. Y lo que van a decir en ese caso es que te faltan elementos de referencia.

Y así, si usted piensa en la página. De su aplicación o su sitio web como tener una especie de esquema o una estructura a la misma, entonces usted puede ver donde tener una cabecera y luego un principal y un pie de página. Y algunas de estas otras cosas ayudan a definir la jerarquía y la importancia de la página. Y para el lector de pantalla, los usuarios, como un ejemplo, son capaces de sacar un menú y realmente navegar por esos puntos de referencia.

Y así. Esos son automáticamente vienen con los elementos HTML que acabo de mencionar nav sería otro muy importante, pueden saltar directamente a eso. Y es, ya sabes, que les permites usar los métodos de navegación con los que están más familiarizados para seguir logrando lo que están haciendo en tu sitio.

Y eso es, eso es por lo que es importante en términos de elementos de referencia y, y. La semántica de tu página, no importa cuál sea el propósito o quién creas que es tu audiencia.

[00:29:18] Matías: Sí, es difícil. Y una de las piezas de contenido de Harder en la página que es w cuando no es accesible son los formularios. Así que para abordar eso, por favor tome. Revisa las notas del programa, encontrarás un enlace al curso de estilo de formularios CSS accesibles entre navegadores en egghead by Stephanie.

Este es un buen recurso para al menos empezar. Ser inclusivo. Usted sabe, yo tipo de tener algunos modelos que la gente es la que se utiliza su aplicación y la gente es por qué el diferente, y no todos la cosa y el mismo tipo de usuario, como una persona. No es así. 

[00:30:03] Stephanie: Sí. 

[00:30:04] Matias: Como Stephanie, estamos llegando al final de este episodio, pero siempre le pido al invitado, si quieren, si quisieran recomendar algo que les guste, lo que sea, no importa si no es techie, es 

[00:30:20] Stephanie: Sí. 

[00:30:20] Matias: lo que te guste ver, leer, mirar, no sé, jugar. ¿Quieres recomendárselo?

[00:30:28] Stephanie: Ooh, paso demasiado tiempo en línea. Así que déjame pensar en eso. 

[00:30:32] Matías: Twitter

Recomiendo 

[00:30:35] Stephanie: twitter

Sí. También soy madre. Así que me olvido de escuchar mi propia música a veces estos días también. 

[00:30:40] Matías: Sí. Pero si he dicho que me gusta este nombre.

[00:30:43] Stephanie: sí. Soy un gran fan de la oficina. Así que supongo que una cosa que recomendaría es que había estado escuchando el podcast llamado las damas de la oficina.

Así que si eres un gran nerd de la oficina, es que jugó Jenna y Angela, y hablan de detrás de las escenas de la oficina y que es agradable para mí. 

[00:31:03] Matías: Vaya. 

[00:31:03] Stephanie: la oficina, probablemente disfrutarás de eso. Son algunos datos divertidos sobre lo que hicieron y sí. Todo. Ese es mi escape. 

[00:31:11] Matías: Muy buena. Sí. Sí. Es difícil. Es difícil ser padre en estos tiempos. Quiero decir que tal vez cada, cada vez, pero ahora podría ser más difícil? Así que la última cosa cualquier enchufe algo que usted quiere compartir que es por, por su propia creación.

[00:31:29] Stephanie: Sí, creo que definitivamente hemos cubierto algunos hoy. Creo que el único que queda es que tengo un podcast. Si estás interesado en él, lo co-presento con un buen amigo mío y se llama rap de pájaros. Así que... No 

[00:31:41] Matías: Bonito nombre. 

[00:31:42] Stephanie: pero como en los encabezados de tu código vs rap de palabras. Así que 

[00:31:47] Matías: Qué bien. 

[00:31:47] Stephanie: tenemos unos 12 episodios si eres Sí, hablamos de cosas de la vida del desarrollador en general y de inmersiones y accesibilidad.

Y estamos empezando a tener invitados también, así que ha sido divertido.

[00:31:57] Matías: Sí, 

[00:31:58] Stephanie: Sí. 

[00:31:59] Matias: definitivamente, compruébalo. Ese enlace estará en las notas del programa también. Así que gracias, Stephanie. Esta fue una muy buena charla y muy buen dedo del pie y sí. Revisa las notas. Encontrarás más contenido de , Stephanie.

Hay un poco más para sumergirse en el lado, así que definitivamente comprobarlo. Gracias por estar aquí. Nos escuchamos en el próximo episodio. 

[00:32:21] Stephanie: Gracias.



English

[00:00:00] Matias: Welcome to us doesn't matter what number of episode is this of Cafe con tech today with me, I have a Stephanie Eckles she is, a modern CSS dev author author of a style stage of it's an egghead instructor a podcaster, software engineer.

Yeah. Name it there. She is doing a lot of work on the front-end side of the world. Welcome Stephanie. Thank you for coming by.

[00:00:27] Stephanie: Thank you So much. 

[00:00:30] Matias: So I always say I did that really poor work on the introductions. So I invite you to introduce yourself, to let the audience get to know you.

[00:00:40] Stephanie: Yeah, certainly. So yeah, I am a front end focus software engineer, and I've been working in web development for well over a decade at this point. And CSS is kind of my specialty topic, but anything front end, including You'll see me talking a lot about HTML, semantics and being an advocate for accessibility and kind of more recently and advocate for JAMstack and in particular, the static site generator eleventy.

But yeah, so I'm not a designer. And so when I approach CSS I really tried to talk about the practical aspects of it trying to help people learn more about what it can do. 

Okay. 

[00:01:23] Matias: It's really interesting. The topics that you focus because somehow the current situation of the front-end development is so focused on JavaScript and all of the power that, that can give you an typescript and state management, and then all of the topics. Then the other part that are really important for creating UIs.

Are completely forgotten like CSS and accessibility. So that, that will be the main focus of this conversation. And I'm really interested and modern CSS. But to jump into that, I want to ask you why you think that CSS is so neglected in their front-end engineering or developer.

[00:02:11] Stephanie: Excellent question. And, you know, I can only speak from my experiences which are US-based experiences. And not only that, but I personally I'm not located You know, in the tech technology hubs, I'm not in San Francisco or I'm not even on the coast, I'm in the middle of the U S where we're not exactly quite known for technology to begin with.

So I just want to make sure folks know where I'm coming from with, with my perspective. But I think that based on my own experience, but also what I see other people talking about is front end. A profession is kind of neglected, right? It's not seen as valuable in actual, you know, how much people are getting paid.

But also valuable in terms of, you know, those folks on your team and what they bring to the table, which is a whole lot. And it, when we, to your point, when we look at like a front end engineer, usually they are getting hired to do JavaScript and It's almost seen as you have to have that skill to make the pay grade that you would like.

Fortunately I think we're starting to see. Some roles coming up like design engineer or, or user experience engineer. There's a few titles, different titles I've seen. Those are usually connected to like customer experience teams or design system teams. So there is a place for folks that are more interested in that part and don't necessarily need to know.

JavaScript or don't need to know it deeply. And I fall into that group. I don't know, deeply. I know just enough to do the sort of standard set of things that I need to do. And so I, I know that also I've seen folks talk a lot about it. Yeah.

Not a priority and boot camps, which is super unfortunate.

I think it goes hand in hand case for both CSS and semantics, and then consequently, that impacts or not somebody is familiar with accessibility. So kind of a combination of things. 

[00:04:11] Matias: Yeah. You mentioned something like the hiring process is completely focused on Javascript. Super powers like unicorns in JavaScript. And so then the bootcamps obviously focused on that and the college or university is focusing. I don't know, whatever, other thing, but years ago before the rise of the new frameworks on Javascript there were a kind of roll that, say it for, for people that was working on HTML and CSS and people that works on Vanilla Javascript

and then you can combine that because they trust that the difference between this job we're really market really visible. Like these folk write. CSS in a good way. And these folk, write, Javascript, then just put it all together. I can recall how the people name it, that, but works, but then react came or maybe backbone, before, but react came and angular came and the CSS line blurred

and now we are writing our CSS inside JavaScript. So how how a person can only focus or mainly focused on CSS. If at the end is still need to deep into the, or whatever other component library you're using.

[00:05:34] Stephanie: Yeah.

For myself what's helped me kind of keep that bigger. View is getting more familiar with accessibility. I think that. Part of what makes it challenging or overwhelming to think about having to know all those things. Firstly, you know for any, you know, more junior folks that might, you know, here, this is, you don't have to know everything all at once right now, regardless of what role you're you're taking or what path you're taking.

Boot camps and things may make it sort of seem like that. Or they might deep dive in one topic. You know, I Google things every day. I got stuck yesterday because I didn't remember that promises were even a thing in JavaScript. Right. Cause I just don't use it every day. So kind of keeping that in mind, you don't have to know everything all at once and you certainly don't have to remember it all the time either.

I think that whether you're learning JavaScript or CSS If you can if you can be able to hold the general ideas of what you want to do, for example, knowing that some feature exists, then you can go and find resources, right. To help you actually attack a problem in the future. And everybody does this, right.

We, none of us can. A grand majority of us can not just sit down and completely like without perfect code without having to look up a single thing. Right. So I think that folks look at CSS is overwhelming. And I was just thinking about this earlier this week. That that is kind of funny because JavaScript's a giant language too, especially when you throw in all the frameworks.

Right? So even if you look at a subset of JavaScript, that's very critical. Like working with Arrays or working with objects, even with that, we can see on Twitter, you know, there is a thread recently about how do you loop over data and even just that caused quite a stir. So, you know, CSS is weirdly looked at as like way too difficult way too overwhelming, but meanwhile, JavaScript has similar.

You know, things, it's a different language. It's serving a different function, of course, but still overwhelming parts and you're still not expected to know all of JavaScript as a language either. So getting more familiar with both allows you to find a solution more efficiently, and one that will be more maintainable.

that's just true regardless of the language. So I think that sometimes we get kind of caught up in know, kind of silly things about it, but really. You know, the best we can ask of ourselves and of our coworkers and everyone else's to keep learning and not be afraid to seek out answers when you need to. 

[00:08:04] Matias: Yeah. Yeah. Google is kind of my wing man. I, 

I actually, I have two screens mostly because when one google and the other one, I have VS code. 

So, Thing that is kind of funny maybe is that most companies are more, most teams look for this pixel perfect implementation of that design, but doesn't look for CSS knowledge or savvy people.

So it's going to, how do you want this outcome without having the correct input? Discussing almost impossible. And also CSS is, as you mentioned, really big thing, but this is, but also it's not fully feature programming language, so it's kind of in the middle. And sometimes it's hard to understand how to tackle things.

Like I am completely sure that most of the developers that write CSS doesn't even know how this works under the hood. How the cascade works why 

[00:09:10] Stephanie: Yeah. 

[00:09:11] Matias: things 

[00:09:11] Stephanie: Yeah. 

[00:09:12] Matias: as it happens. So how do you teach CSS to someone that already know a little bit. I think that that that'd be the folks that knows something.

Are the harder to teach something

[00:09:26] Stephanie: yeah.

That's an interesting perspective. And I think the more you can. Relate things to practical use cases rather than, you know, you'll for CSS, especially. I think one thing that makes it overwhelming as you see people doing art with it. Right. And it's beautiful and it's amazing. And I'm so, so impressed by folks that do that. Yeah.

of course. Right. That's awesome that that's a creative outlet, but that can be overwhelming if you were like, okay, well, what do I actually need to know from the language too? Like you said accomplish this layout that is really just boxes arranged in a grid, maybe some images, you know, and I think that that's where I try to make it more approachable is let's break it down to that.

Like ultimately we have boxes, we're worried about alignment and then we kind of layer in. The other things you need to know from a very practical angle. So working with responsive design of images and only kind of introducing those more fanciful style properties when we really need to. And some of them you know, when we look at what's available to us, a lot of it has just been in the last few years that we have support.

And I think that's the other area where folks get Confused and, and, you know, are not certain what to choose as the right answer, because we always also have to worry about and we don't exactly have Babel for CSS or something where, you know, we can, we have, Autoprefixer where it automatically adds any vendor prefixes, like web kit which is helpful, you know, but that's kind of the only tool and it's not, that what you write.

Automatically works in other browsers necessarily even with that available. So there are additional challenges. And that can be frustrating. I think that's when we started to, you know you used bootstrap or some of these frameworks that's part of their appeal. As they've solved some of those problems, you can rely on them give you a solution for those very foundational things.

And then you just need to worry about adding your brand or. A little bit of extra magic on top of it. Depending on 

[00:11:34] Matias: Yeah. 

[00:11:34] Stephanie: request is coming from and your So it's interesting.

[00:11:40] Matias: I came from the time where we develop layout with HTML, with HTML tables yeah. Long time ago and borders with images and that kind of things. And then we jumped into use divs all over the place and then bootstrap for everything, and then fight against bootstrap and then try to Feel the holes of the programming language using less or sass.

And after 

[00:12:06] Stephanie: Yeah. 

[00:12:07] Matias: then trying to understand the box model or the name. And after I understood that. I was recent dressed. Yes. They're able to write useful CSS by understanding what I'm doing, then slowly flex came and it was weird. 

[00:12:27] Stephanie: Yes. 

[00:12:28] Matias: weird. And then grid came and that's amazing. it's hard to keep up with what is happening in this css world right now.

Here's where it comes, modern CSS solutions and a small CSS two of your sites content. what can I found in modern CSS or why call it modern?

[00:12:51] Stephanie: Yeah, fair question. So modern css.dev is where I have Do I have, I have like 28, I think right now. They're, they're quite lengthy in tutorials. But they're approaching different topics, practical topics where. To exactly address what you, you said where that CSS has moved so fast as a language in the last few years, that if you have been reliant on frameworks or, you know, you've been in the JavaScript world or whatever, other kind of, you know, side of the programming house and you've been working on if you haven't looked at it in a while, you definitely have probably missed a few things that it can do and that it can do a lot more simply.

Used to be the case. Basically we are kind of in an awesome place where with modern CSS, we have way less hacks that we have to implement to achieve things that were quite painful in the past. Definitely. So it rose out of, you know, my own experiences with having had to face those challenges and looking at it with fresh eyes and what CSS provides now as a more mature language and as a language that is.

Moving very fast right now. It will look even more different in two months, six months a year from now. Because it's just in a really rapid state of development right now. It's just exciting, but it also do your point will make it harder to keep up. And especially if you will, are still, you know, worried about it, little bit more legacy support, but I think that that's going to also be changing.

In a couple of months when I 11 is not as much of a challenge for certain parts of the world. So there's always new challenges to you know, have to keep in mind some of these older things, but also definitely try to embrace, or at least as I mentioned earlier, be aware of what is possible so that you at least have an idea of what a solution could look like.

When you're asked to do something so modern CSS shows you a variety of solutions to common practical problems. But my goal with that is that you just kind of generally get from, are more familiar with the language and have, can take those solutions with you to your everyday work. so a small css.dot, which is S M O L.

Instead of being tutorials, it's a more focused snippet of a particular technique. So just a little quick demo that tells you about modern CSS properties. So for example, CSS functions, things about grid, things about flex shows you how to use them and maybe ways you haven't quite encountered. And also in a way that you don't have to go dig through a tutorial to kind of get just that solution. 

[00:15:39] Matias: I to. The, the colors on the smolcss are 

[00:15:43] Stephanie: Yeah, 

[00:15:44] Matias: Even the white the light deem is really, really nice. 

[00:15:51] Stephanie: thanks. 

[00:15:52] Matias: one thing that high con I consider modern and 

[00:15:56] Stephanie: Uh huh. 

[00:15:56] Matias: is few topics that I always blow my mind, the possibilities like animations that I really used to use Javascript to do the animations.

And that is really hard on the, on the browser engine but CSS is desk flight. It's really amazing, but it's hard to understand the key frames and, and, and the transitions in the ease informations and all of that. That's one thing. 

[00:16:22] Stephanie: Okay. 

[00:16:23] Matias: those functions that is quite new for me, at least because I know calc and all, that's all I know.

And, and CSS variables that I think is kind of the world now in terms 

[00:16:37] Stephanie: Yeah. 

[00:16:37] Matias: system design systems. But more than that, they container queries. That is something that is about to come. Hopefully soon. That is quite amazing. To try , understand what our container queries and why is, are so damn good.

[00:16:58] Stephanie: So container crays are definitely something to grow. That it is safe to start getting excited about my, and I say that because it's been a concept that's been around for quite some time, but now we finally have a prototype currently in Chrome Canary. So you have to go into the flags settings and choose to turn that on.

And only Chrome Canary right now. And container quarries allow us to, instead of watching the view. Like we do for media. Cory is as we've all kind of, you know, wrapped our heads around that probably if you're doing any sort of layout work using media queries to watch the viewport. Now with container queries, you can watch a specific Anywhere in your layout and respond to that in a very similar way as media Corey's, but now you've reduced it down and scoped. It would, I guess, would be the better way to say that scoped it to particular element and its children. So you can attach a container query for example, to an article. And then as you watch that article.

Changed width in different environments. Maybe it's in, maybe in some pages it's allowed to go full screen and on your homepage, you have three articles in a columns across the page. So a narrower column. And so the container query allows you to change the elements within that article, as it changes with.

So things like font size, maybe adding or removing borders and box shadows, whatever you need to do. So you're effecting the. You're watching the article, but you're changing properties of its descendants as it changes and you define it very similar to immediate query. So at container, and then in parentheses something like men width, whatever value you would like to use there.

So that's the essence of, of what they are, it's in the current prototype. But there's a lot more possibility that they are exploring for them as well. Very exciting stuff. 

[00:18:52] Matias: Yeah. And in the show notes, you will find a link to the container queries with CSS grid and Flexbox article, that is available in moderncss.dev. So, yeah. Yeah, this is amazing. And it will solve really common problems with the media queries and all of that. But I, question that is kind of a tricky, but.

CSS is going along with nice features and things that are scoping. Like 

[00:19:26] Stephanie: Yeah. 

[00:19:26] Matias: The CSS variables are scoped with the container queries is kind of a scope. Why CSS is no scope or modular? Why keep it like cascade? Because one of the pains is in the reasons for all of the CSS in JS things there.

Module is cope. The thing why just don't do it like that or why it's good to have it as, as a cascade.

[00:19:55] Stephanie: So I have good news scoping is coming to CSS. 

So Mariam Suzanne, who's also this spec author for container quarries. Yeah. So specking out actual scope in CSS, there's two new concepts coming scope and also layers, which is a little bit harder to understand. So scope we'll let you define it. What you're they are taking inspiration from the CSS and JS and CSS modules and so forth.

They are taking inspiration from that to bring it to CSS a native feature, it is coming. 

[00:20:30] Matias: Nice.

[00:20:30] Stephanie: So yes they are And group definitely watches. Of course, what folks are is challenges. And so, as I mentioned, it's a rapid state of development for the language right now. And so features are to be.

You know, specked out, but of course that means there's a little bit of time still wait. But the cool thing about that is, and for folks who may not know cause I didn't a few months ago the working group, the CSS working group now has all of their. Issues and items that they're working on, on get hub.

And so you can actually go see what is coming to the language and you can comment on them and, and, you know, use the get hub emojis to indicate if you're in support of them or not. And you can actually even add your own. Issues against the different specs being developed. So it's not something it's certainly not a stale language, and it's also something that you can actually go see what's happening and, and suggest things like that.

So if you want to go look up the scope spec, you could see if you think it meets the needs that you would like to, to have and, and provide commentary. Yeah, Which is pretty cool.

So. 

[00:21:38] Matias: almost every language is opening in their process RFC. So now CSS also, that's amazing. So let's cross fingers for the browsers 

[00:21:49] Stephanie: Yeah. 

[00:21:49] Matias: speed 

[00:21:51] Stephanie: Yes, 

exactly. 

[00:21:52] Matias: go out. 

[00:21:54] Stephanie: Yeah. 

[00:21:56] Matias: All of this CSS thing is because we want a better user experience. But there is a amount of population that even with our best efforts on CSS, don't get a good user experience because they have some disabilities that avoid them too.

You really use the obligation as you thought it will be used like a visual problems or manipulation problems. I don't know the words exactly. But. Accessibility. 

[00:22:28] Stephanie: Okay. 

[00:22:28] Matias: the term that we, I want to tackle now. What is accessibility and why is again, same question. Why is so neglected?

[00:22:39] Stephanie: Yes. So there's kind of two terms you'll see. Accessibility is kind of a catch all term that you'll see most often a related term is inclusive design. And. Accessibility is about ensuring that regardless of the ability as a user has come into your site, they are able to complete the tasks and they are able to access your content equally to someone.

Full abilities. And so, as you mentioned, sometimes that's visual impairments and that's the one that kind of gets a lot of attention. I talk about that in two ways. We, we emphasize it when we talk about color contrast. So maybe it's just, you know, various degrees of colorblindness would be a familiar term where we want to ensure that the contrast is high enough.

You can read it. And the other thing that, that impacts though and another. Phrase you'll see is that accessibility is for everyone. So when we talk about color contrast, for example, that helps everyone. If you consider times that you've had your phone out in the bright sunlight and suddenly you can't see what's on screen without going into the shade.

Right? So contrast is an example of accessibility criteria that helps everyone. We also talk about visual impairments. When we talk about equal access to content, in terms of users who are. Are have no sight at all have to use additional tools like screen readers would be a common term. There's other things that those users might have where they're hearing it read to them.

There's also users who can't use mouse at all, or any sort of touch devices. so they're actually speaking, you know, to request. To, to add the interface to be navigated. So there's lots of different impairments that we want to try to defend against. And that's kind of, implied by accessibility.

And so for CSS, of course, we talk mostly about the visual aspects, but there are certain CSS properties that Can remove, for example, if you do display none removes whatever that element is for every user, which is kind of interesting. So if you hide content that way, it hides it from a screen reader and just like a visual user.

So they, they definitely have an impact on, you know, CSS definitely has an impact, definitely sodas, JavaScript, which would be a topic for a different day. But So, yeah, it's we talk a lot about or one of the reasons you see me emphasize HTML semantics within my CSS articles is without that solid foundation you know, you are more likely to end up with a less accessible solution.

And the reason is because of tools. Screen readers are expecting certain elements and they know information about your interface if you use the correct element. So if you're using a checkbox for something that has nothing to do with me in a checkbox, you're giving that user the wrong information and they may not be able to complete whatever task they're trying to do.

So yeah. 

[00:25:45] Matias: HTML is not a programming language. It's a markup language, but it's really big. And also a evolving and LA, 

[00:25:53] Stephanie: Yeah. 

[00:25:54] Matias: things to the language, but most of the us abusing div and a span. 

[00:26:01] Stephanie: Okay. 

[00:26:02] Matias: and that is so 90s, not even men, even there is a lot more really basic tags. That kind of help machines to understand our content, enable people to understand our content 

[00:26:18] Stephanie: Yes. 

[00:26:18] Matias: a screen reader is a machine that expecting certain things to be able to do their job.

So how, how you can tackle necessity of adding this some basic layer of accessibility in application that where they. that doesn't matter. Like, this is no public facing and this is 

[00:26:43] Stephanie: Yeah. 

[00:26:44] Matias: So whatever, but still, this is still a main, this is still a footer. Let's see that Heather. yeah, I dunno.

hard to enforce the use of the correct semantics.

[00:26:57] Stephanie: Yeah, it's, it's an interesting one. And it's one that I've encountered at my previous position. And again, at least in the U S but I'm imagine a significant amount of other areas in the world, too. you. If, if you think that way, if you're trying to, you know, get away with, guess know, not worrying about semantics even for application, that means you are possibly discriminating against employees, for example, or basically you never know who's going to use your application.

even things such as ensuring that your. App that you think is a desktop application. there's no mobile users because this is a application for customer service. You know, sales representatives. Well, if you're like me who is a little bit older and now finds myself zooming in, you know, if your application doesn't even respond to zooming in, you know, that's the type of barrier that you're providing.

And. So it's, it's a lot of little things that can add up. The good news is for something like the essential semantics, where you're mentioning, you know, if you're only using dibs, for example automated testing tools, that's one of the things that they can help you identify. And what they're going to say in that case is that you're missing landmark elements.

And so if you think about the page. Of your application or your website as having kind of an outline or a structure to it, then you can see where having a header and then a main and a footer. And some of these other things help define hierarchy and importance of the page. And for screen reader, users, as one example, they are able to pull up a menu and actually navigate by those landmarks.

And so. Those are automatically come with the HTML elements that I just mentioned nav would be another very important one, they can skip directly to that. And it is you know, you're, you're allowing them to use the navigation methods that they're most familiar with to still accomplish what they're there to do on your site.

And that's, that's why it's important in terms of landmark elements and, and. Semantics of your page, no matter what the purpose is or who you think your audience is.

[00:29:18] Matias: Yeah, it's hard. And one of the Harder's peices of content in the page that is w when it's not accessible are forms. So to tackle that, please take. Check the notes on the show, you will find a link to the accessible cross-browser CSS form style course on egghead by Stephanie.

That is a good resource to at least start . Being inclusive. You know, I sort of have some models that people are the ones that are used your application and people is why the different, and we not all the thing and the same kind of user, like one persona. It's not like that. 

[00:30:03] Stephanie: Yep. 

[00:30:04] Matias: As Stephanie, we are arriving to the end of this episode, but I always ask to the guest, if they want to, if you wanted to recommend something that you like, whatever it is, no matter if it's not techie, it's 

[00:30:20] Stephanie: Yeah. 

[00:30:20] Matias: whatever you like to see, read, watch, I don't know, play. You want to recommend it to them?

[00:30:28] Stephanie: Ooh, I spend too much time online. So let me think of that. 

[00:30:32] Matias: Twitter

I recommend 

[00:30:35] Stephanie: twitter

yeah. I'm also a mom. So I forget to listen to my own music sometimes these days too. 

[00:30:40] Matias: Yes. But if I said that I like this name.

[00:30:43] Stephanie: yeah. I'm a big fan of the office. So I guess one thing I'd recommend is I had been listening to the podcast called the office ladies.

So if you're a big nerd about the office, it's that played Jenna and Angela, and they talk about behind the scenes of the office and that's enjoyable to me. 

[00:31:03] Matias: Wow. 

[00:31:03] Stephanie: the office, you'll probably enjoy that. It's some fun facts about they did what they did and yeah. Everything. That's my escape. 

[00:31:11] Matias: Nice one. Yeah. Yeah. It's hard. It's hard being a parent during these times. I mean maybe every, every time, but now could it be harder? So last thing any plug something that you want to share that's by, by your own creation.

[00:31:29] Stephanie: Yeah, I think we definitely covered some today. I think the only the main one remaining would be, I have a podcast as well. If you're interested in that, I co-host it with a good friend of mine and called bird rap. So. Not 

[00:31:41] Matias: Nice name. 

[00:31:42] Stephanie: but like in your vs code's headings word rap. So 

[00:31:47] Matias: Nice. 

[00:31:47] Stephanie: have about 12 episodes if you're Yeah, we talk about kind of general developer life stuff and dives and accessibility.

And we're starting to have guests too, so it's been fun.

[00:31:57] Matias: Yeah, 

[00:31:58] Stephanie: Yeah. 

[00:31:59] Matias: definitely check it out. That link will be in the show notes too. So thank you, Stephanie. This was a really good talk and really good toe and yeah. Check out the notes. You will find more content by , Stephanie.

There is a little more to dive in in the side, so definitely check it out. Thank you for being here. We hear us in the next episode. 

[00:32:21] Stephanie: Thank you.