DEV Community: Miriali López

La ruta del primer año: De legalmente rubia a Dev ♥

Miriali López — Sun, 11 Apr 2021 19:52:45 +0000

Hola a todos! En este día tan especial para mí me animo a compartir con ustedes un post que poco o nada tiene que ver con aspectos técnicos, hoy hace exactamente un año del día que decidí aprender a programar, quiero comentar que hasta ese momento la mayoría de mis estudios fueron en Ciencias sociales y humanas, específicamente en: Derecho, administración, educación e investigación; por lo cual si bien tenía algunas competencias tecnológicas jamás había estado en contacto con un lenguaje de programación de ningún tipo y honestamente, nunca me sentí atraída “por las computadoras”.

No obstante lo que si me ha gustado siempre es darle a mi mente y a mi vida pequeños retos intelectuales que me lleven a hacer cosas que según mis propias creencias “jamás haría” y así fue como en medio de la pandemia decidí darme una oportunidad para aprender algo nuevo. Programación era perfecta para mí, un área de conocimiento jamás explorada por mí y que a su vez me permitía poner a prueba dos creencias limitantes: “no soy buena en matemáticas” y “mi nivel de inglés no es muy bueno” ambas fueron destruidas por el pasar del tiempo gracias a las increíbles herramientas que te facilitan el acceso a la información, el traductor en el navegador además de la gran cantidad de material con información de calidad que es posible encontrar en los foros, redes sociales, tutoriales y cursos, todo eso te ayudan a ver el panorama más claro y a dejar expuesto que la diferencia entre aprender o no, está en el deseo que tengas de aprender y tu capacidad para organizar el tiempo de manera que puedas siempre tener por lo menos un pequeño espacio de tiempo para instruirte y practicar.

Un aspecto muy importante en este proceso fue saber por lo menos someramente cual era el área de la programación que deseaba aprender, para así afinar la búsqueda con miras a lenguajes, tecnologías y herramientas que le sumaran a mi formación, en tal sentido elegí el Desarrollo web, pero entonces me pregunté: ¿Front-end o Back-end? Y respondí: ambos! Pero primero Front-end, esto debido a que ya tenía algunas nociones de diseño, psicología del color y soy muy detallista, con esta base emprendí mi búsqueda de conocimiento y desarrollo de habilidades nuevas, en medio del desalentador ambiente de la pandemia decidí tener opciones y darme la oportunidad de seguir creciendo, sin importar que sintiera que de cierta manera el mundo se detenía.

Durante este año noté que en realidad era otra inocente Jon Snow (me refiero a que no sabía nada de nada) y aprendí a aceptar que no saberlo todo es humano, que sin importar cuanto lo intentes no vas a aprenderlo todo de inmediato así que solo te queda una opción, aprender a disfrutar del proceso de aprendizaje y eliminar en lo posible esa ansiedad de ir más rápido, descubrí la invaluable sensación de conquista cuando te das cuenta que vas mejorando, que tus proyectos aunque sean de practica se ven y funcionan cada vez mejor. Esa sensación de vivir tus sueños en lugar de solo soñarlos me sigue acompañando en esta ruta y me encanta.

Mi camino apenas comienza y estoy encantada de poder sentirme cada día más cerca de la comunidad, poder conocer a gente increíble dispuesta a compartir abiertamente lo que hacen con total naturalidad y buena disposición, cada nuevo aspecto que descubro, aprendo y enfrento me ayuda a crecer como persona y profesional, por eso estoy agradecida de vivir este día y darme cuenta como Carl Sagan si tenía la razón cuando dijo que: “En algún lugar, algo increíble está esperando a ser descubierto” solo hace falta que nos atrevamos a buscar y aceptemos el reto de cambiar y crecer.

¿Que es react-icons?

Miriali López — Thu, 11 Mar 2021 02:03:29 +0000

También disponible en: Miriali_Dev

Razones por las que Aman o Odian Tailwindcss

Miriali López — Fri, 05 Mar 2021 03:32:42 +0000

Tailwindcss es una librería de utilidades que nos provee de clases Css predefinidas para la creación de componentes según las preferencias y necesidades del desarrollador, de un tiempo para acá ha ganado espacio dentro de la comunidad y cada día son mas los que se aventuran a su uso y exploración. Es por ello que hoy me animo a compartir contigo un par de infografías donde puedes ver las razones por las que es amado o odiado Tailwindcss.

Claves del modo nocturno

Miriali López — Fri, 19 Feb 2021 05:41:27 +0000

Debido a su uso en dispositivos móviles, plataformas, sistemas operativos y computadoras mucho se ha hablado desde hace tiempo del modo nocturno, si bien sus implicaciones en la salud visual de los usuarios aun son objeto de debate, lo cierto es que ya es una funcionalidad que forma parte de nuestro día a día, pues plataformas como YouTube, Google Maps, Google Play, Twitter, Facebook, Github entre otras ya la han incorporado como una función de accesibilidad que permite al usuario usar sus dispositivos por un periodo largo de tiempo sin que se vea tan drásticamente afectada su visión.

El dark mode consiste en establecer un cambio temporal en la paleta de colores de una interfaz de usuario, procurando una combinación de colores en la que el fondo mezcla tonos oscuros en lugar de claros y textos grises en lugar de negros, este cambio suele ser expresamente elegido por el usuario y tiene como fin proporcionar una interfaz de usuario con menos contraste, más minimalista y que mitigue los efectos de la fatiga visual.

Sin embargo el modo nocturno es mucho más que simplemente un fondo negro con letras blancas, es preciso tomar en cuenta varios aspectos que permitirán que esta funcionalidad logre su cometido. A la hora de elegir el diseño de nuestro modo nocturno debemos principalmente tener claro cuál será su utilidad u propósito, además de determinar los siguientes aspectos:

1. Colores primario y secundario

Un color primario es el que se muestra con mayor frecuencia en las pantallas y componentes de la aplicación, razón por la cual generalmente está ligado al diseño de la marca y deberá ser utilizado en momentos clave, a fin de que el usuario asocie esos colores con acciones e información específica, por su parte un color secundario viene a acentuar partes seleccionadas de la interfaz de usuario.

Dentro de este marco se recomienda el uso de colores desaturados y variantes de colores primarios que permitan cumplir con las normas de accesibilidad en cuanto al contraste, faciliten la legibilidad del texto y eviten las vibraciones ópticas generadas por colores saturados sobre un fondo oscuro.

2. Superficies como fondos y componentes

En cuanto al diseño de superficies como fondos y componentes se debe elegir un color de base y otro para componentes elevados, el primero de estos suele tener colores más oscuros, lo que permite que la interfaz de fondo parezca retroceder y así los colores en los componentes elevados (que deberán ser mucho más claros), presentarán las interfaces en primer plano.

Dentro de este orden de ideas para los componentes elevados suelen usarse tonos gris oscuro pues pueden expresar una gama más amplia de color, elevación y profundidad, es mucho más fácil ver sombras en gris que en negro, la elevación y superposición cumple un papel muy importante a la hora de diseñar el modo nocturno.

3. Los estados de error

El color cumple una función comunicativa y jerárquica que permite instruir al usuario sobre el orden y significado en las interacciones de la interfaz, es por ello que no podemos olvidarnos de diseñar correctamente los estados de error en nuestro modo nocturno, debido a que como su nombre lo indica se utilizaran para indicar al usuario un estado de error y por tal su texto debe ser legible, contar con un buen contraste y destacar sobre el resto sin perturbar la visión del usuario.

4. Contenido como tipografía e iconografía.

Ahora bien en cuanto al contenido como tipografía e iconografía se suele recomendar el uso de colores on, que para el caso del modo nocturno suelen ser el blanco o negro, estos generan un efecto de estar por "encima" de superficies como un color primario, secundario, un color de superficie o un color de fondo.

En este sentido conforme a la Web Content Accessibility Guidelines (WCAG) del W3C para la presentación de textos e imágenes de texto debe guardarse un ratio de contraste de al menos 4.5:1, con lo que se garantiza un buen contraste entre el color de la fuente y el fondo, sin embargo existe una excepción a esta regla en el caso de texto grande (aquel con al menos 18 puntos de tamaño o 14 puntos si está en negrita) para el cual es suficiente un ratio de 3:1.

En este sentido cuando aparece texto claro sobre fondos oscuros Google Material Design recomienda hacer uso de diferentes niveles de opacidad según el caso lo amerite, cuando se trate de texto de alto énfasis debe tener una opacidad del 87%, en texto de énfasis medio se aplica al 60% y para texto deshabilitado usa una opacidad del 38%.

Una vez dicho lo anterior cabe agregar que la mejor manera de diseñar y desarrollar un modo nocturno exitoso, es probando cada uno de los aspectos mencionados con anterioridad y evaluando su interfaz de usuario con una visión orientada a facilitar su uso, lograr mantener una uniformidad en su diseño y proporcionar al usuario la mejor experiencia posible.

Backdrop-filter: La propiedad detrás del Glassmorfismo

Miriali López — Sat, 23 Jan 2021 22:23:13 +0000

Mucho se ha hablado desde el año pasado sobre el glassmorfismo como una tendencia de diseño predominante en este 2021, si bien hay posiciones encontradas al respecto; debido a que algunos afirman que esta tendencia pone en peligro la accesibilidad, también hay quienes plantean a esta variante del neumorfismo como una tendencia imparable, que trae un renovado look and feel que crea la sensación o apariencia de que el usuario ve a través de un cristal.

Para lograr tal fin es necesario cuidar de tres aspectos muy importantes en los elementos:
1. Los bordes necesariamente deben ser claros y ligeros para reforzar ese efecto de vidrio esmerilado.
2. Los colores a utilizar de fondo deben ser vivos para resaltar la transparencia borrosa del contenedor y permitir la legibilidad del contenido.
3. El fondo del contenedor debe tener un efecto de desenfoque.
4. La sombra del elemento debe facilitar la identificación visual del mismo.

Ahora bien, para lograr ese efecto Css nos proporciona la propiedad Backdrop-filter que permite aplicar efectos gráficos como desenfoque o cambio de color a un área en concreto, es decir ésta propiedad solo se aplica a un contenedor sin que se vean afectados los elementos que están dentro del mismo, característica que marca una clara diferencia respecto a propiedades como filter, opacity o el resultado que podemos obtener al no especificar un fondo, configurarlo como semitransparente a través de rgba o aplicar una opacidad a todo el elemento.

Con backdrop-filter puedes aplicar efectos como:

gray-scale()
sepia()
saturate()
hue-rotate()
invert()
opacity()
brightness()
contrast()
blur()
drop-shadow() e incluso
url() para filtros svg

Sin embargo para lograr este efecto del glassmorfismo solo es necesario usar blur() cuya función es aplicar un desenfoque gaussiano a la imagen de entrada. No obstante según Can I use esta propiedad aun no es compatible con todos los navegadores, razón por la que se recomienda usar la consulta @supports que te permitirá especificar declaraciones que dependen de la compatibilidad del navegador con backdrop-filter y con el cual podrás proporcionar un estilo completamente diferente al elemento para los navegadores que no lo admitan.

A fin de que puedas ver esta propiedad en acción te presento el siguiente ejemplo donde podrás ver todos los aspectos que te mencioné con anterioridad: