#238 Cómo pensar en imágenes responsivas
Entendiendo Interaction Next to Pain (INP)
¡Hola Frontenderos! El día de hoy hacemos la transición de ser un newsletter diario, a compartirles 3 veces por semana nuestros números. A partir de hoy recibirás los Lunes, Miércoles y Viernes este newsletter. Esto lo hacemos con el fin de garantizar la calidad de información que les compartimos y sigamos aprendiendo juntos. 😉
Cómo pensar en imágenes responsivas
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/a5952589-da20-4653-9d77-51af3005b244/Captura_de_Pantalla_2024-05-06_a_la_s__9.31.46_p.m..png?t=1715052720)
Hay un gran verdad al momento de trabajar en la Web con imágenes, y es el que tenemos las herramientas a nuestra disposición para crear la mejor experiencia para nuestros usuarios y no las usamos. Hay dos formas de atacar este problema, uno es aprender más sobre los estándares con los que podemos optimizar imágenes en el navegador, y otro es comenzar a implementar en nuestros workflows, nuestros frameworks y nuestros CMS. Y haciendo esto estaremos haciendo el mundo un mejor lugar. 🌈
Entendiendo Interaction Next to Pain (INP)
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/2286229a-99e4-4b60-9bba-5da99bee2564/Captura_de_Pantalla_2024-05-06_a_la_s__9.34.56_p.m..png?t=1715052908)
Ya pasaron casi dos meses desde que esta métrica comenzó a formar parte de Core Web Vitals, y si aun no entiendes bien de que va el tema y porque es importante que lo comprendas como Frontendero, los compas de Frontend Masters y Mat Marquis, han hecho un excelente artículo explicándolo.
El diseño es un proceso de atorarte
![Frustrated Sutton Foster GIF by TV Land](https://media1.giphy.com/media/LmnIy0FBsfsxuBVAjs/giphy-downsized.gif?cid=2450ec30t5bgniyd0xgp38xtp79mt1111oiephr8xhusyy5l&ep=v1_gifs_search&rid=giphy-downsized.gif&ct=g)
¿Qué haces cuando te atoras en la solución a un problema? Muchas veces pensamos, y sobre todo al inicio de nuestras carreras, que nos pagan por programar, pero en realidad nos pagan por solucionar problemas mediante la programación. Y como todo proceso creativo, nos podemos atorar. Cuando llegas a este estado, lo mejor es levantarte y buscar la solución con el background de tu cerebro mientras haces otras cosas, como por ejemplo, si trabajas en equipo, el conversar y compartir con ellos ayudará a iniciar esos procesos cognitivos que te ayudarán a solucionar lo que sea que te detiene.
EL RINCÓN DEL DISEÑADOR 🎨
Repensando Personas: empatía e inclusión en diseño
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/d5b63743-40c3-4f9d-a293-34cea0f84e5c/Captura_de_Pantalla_2024-05-06_a_la_s__9.42.14_p.m..png?t=1715053347)
Este es un tema que bien podría ser solo para diseñadores de UX, hasta que nos damos cuenta que si como Frontenderos nos involucramos en esta etapa, podemos entender mejor qué es lo que se quiere lograr, e incluso dar nuestro feedback. Y así el proyecto gana.
EL RINCÓN DE CSS 👨💻
Text Effects
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/c53b998b-8162-4e90-b5fa-c69e8f10b420/Captura_de_Pantalla_2024-05-06_a_la_s__9.43.51_p.m..png?t=1715053442)
Cualquier efecto de texto en diseño se puede mostrar mediante una imagen de mapa de bits o una imagen de vectores en el navegador. Pero si quisiéramos usabilidad, accesibilidad y sobre todo optimización, también lo podríamos lograr con CSS y sus multiples propiedades para trabajar con texto. Y si necesitas inspiración o una guía para comenzar, aquí te dejamos un link que esperemos se llene de artículos.
HERRAMIENTA 🛠️
barba.js
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/4d904ac9-73b0-46b3-999e-3372f50e6b37/descarga.png?t=1715053530)
Con la API de View Transitions, iba a comenzar una revolución en el manejo de las transiciones entre las páginas de un sitio web, y prueba de ello es barba.js, una herramienta que te ayuda a crear una fluidez para que tu sitio sea más atractivo y rápido.
LANZAMIENTO 🚀
nanogl
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/6081eada-1691-40ef-b86c-c82b69c82681/share.jpeg?t=1715053625)
¿Has ocupado WebGL para realizar algún proyecto y te gustaría tener un framework cuyas abstracciones te hagan un poco más fácil trabajar este tipo de proyectos? Te traemos una solución que te podrá interesar: nanogl.
UN DÍA COMO HOY 🗓️
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/d7bcba3c-0eb1-45dc-ae12-a183f4774a61/05-06_Efemerides_de_Tecnologia__iMac_g3.jpeg?t=1715053847)
El 06 de mayo de 1998, Apple anuncia el iMac, su primer modelo fue el iMac G3.
El iMac está orientado al mercado doméstico y todos sus modelos se caracterizan por integrar la CPU y el monitor en un único aparato.
Este modelo será lanzado cuatro meses después el 15 de agosto de 1998.
Desde su aparición el iMac a evolucionado a través de cinco formas distintas, todos firmados por Jonathan Ive, famoso diseñador industrial.
La iMac G3 es la única iMac que incorpora un monitor CRT, de este modelo existen 16 versiones.
La iMac G3 fue la primera Macintosh en prescindir de la unidad de disco flexible (disquete) y del Apple Desktop Bus e incluir puertos USB y el único hasta la fecha en estar disponible en una amplia gama de colores.
La ‘i’ del nombre significa Internet, innovación, inspiración, instrucción, individual e informar, según lo que Steve Jobs declaró en la presentación del primer iMac.
A partir de esto, Apple ha creado una identidad de marca que ha aplicado a la mayoría de sus productos.
Curiosidad: El iMac G3 fue el primer producto de Apple cuyo nombre inicia por la letra ‘i’
VACANTE 💼
Consultor Full Stack.net
Ubicación: México (Remoto)
Empresa: Beyserin Consulting
Requisitos: EXPERIENCIA mínima de 4 años como FullStack Consultant .NET.
Indispensable: ;Experiencia como líder de proyectos con capacidades técnicas sobre SQL, JS, .NET y deseable algo de Python.;Experiencia mínima 4 años en el entendimiento de plataformas para Azure y modelo de Cloud Computing.;Experiencia diseñando arquitecturas de tecnología.;Experiencia en el desarrollo de modelos de gobernabilidad de la información sobre centros de soporte y servicio.;Conocimiento de JS, JavaScript, HTML5, Node JS.Aplicación de modelos de AI, integrado a plataformas y conocimiento de SaaS.;Experiencia en el manejo de proyectos asegurando la calidad de los entregables en conjunto con el Product Lead, apegándose al estándar previamente definido
Actividades: Definición de propuestas para la mejora e innovación de las plataformas hacia SaaS.;Definición de estándar para la reutilización de código y aprovechamiento de los recursos de desarrollo.;Documentación técnica para hacer más eficiente el proceso entre UX/UI-Front y Back.
¿Te interesa aplicar a esta vacante? Aquí te dejamos el link. 🤞
Tu feedback nos ayuda a mejorar
Por favor elige una opción y dinos lo que te gustó y lo que no. Leemos todas las respuestas 👀
¿Qué te pareció el email de hoy? |
Iniciar Sesión o Suscríbete para participar en las encuestas. |
¡Hasta el Miércoles! 🤟