eme (@emedevelopa.bsky.social)

secure.ticketmaster.essecure.ticketmaster.es

10 Sept 2025

Two tickets available for Post Malone in Barcelona, September 12 – Standing area. €60 each secure.ticketmaster.es/rs/188473565...

27 May 2025

Sneak peek of what’s going on 👀 #design #UXDesign #WebDesign #buildinpublic

25 May 2025

I had no idea creative paralysis was a thing until my brain got overloaded with colors, fonts, margins and paddings. Now I get it - less is more.🙌 #design

22 May 2025

At first, I thought the design process would be much easier and more linear. Now I realize that design only moves forward and backward. Good ideas are seeds waiting to germinate and they only grow when you keep working and pushing boundaries.🌻 #design #designer

21 May 2025

Trying different navbars. Which one do you like the most? #buildinpublic #design #figma

20 May 2025

Morning design with coffee is my fave. #design #figma

17 May 2025

I’ve been playing around with CSS animations and just added this cute little dot cursor effect. What do you think? Would love to hear your thoughts! ❤️ #WebDesign #FrontEnd #design

9 May 2025

#branding #brandindesing #casestudy

2 May 2025

The first of many projects in @webflow ! #webdesign #webflow #portfoliotemplate #design #ux #ui #portfolio #webtemplate

1 Apr 2025

Love my pal @figma.com

29 Mar 2025

Se viene otro proyectito 👾 #HTML #CSS #JavaScript

27 Mar 2025

Por las mañanas trabajando en el proximo diseño y por las tardes sufriendo con la recursividad en JS. No se hacer una sola cosa 😂

Generar cards de posts de forma dinámica con JavaScript es fácil. Solo necesitas un array de objetos y un bucle para crear el HTML. #WebDev #JavaScript #FrontEnd

El contenido de cada card lo agrego accediendo a las propiedades del array de posts (usando el nombre de la propiedad como clave) y lo añado con textContent. #WebDev #JavaScript #FrontEnd

Finalmente, una vez que tengo todos los elementos creados, los uno utilizando appendChild para que la estructura HTML tenga sentido y todo encaje correctamente. #WebDev #JavaScript #FrontEnd

Generar cards de posts de forma dinámica con JavaScript es fácil. Solo necesitas un array de objetos y un bucle para crear el HTML. #WebDev #JavaScript #FrontEnd

Con un bucle forEach recorro los posts y genero los elementos necesarios. Con createElement creo los elementos (como div, article, p) y les añado clases con classList.add para aplicar estilos. Además, no olvido incluir los atributos aria necesarios usando setAttribute. #WebDev #JavaScript #FrontEnd

Y por fin está listo!! Un blog hecho full JavaScript, totalmente responsive y con las siguientes funcionalidades: 🔸Filtros por categoría 🔸Paginación 🔸Posts creados dinámicamente 🔸Comentarios 🔸Modo claro/oscuro Aquí está el bebito 👇 thisismyfirstprojectblog.netlify.app #FrontEnd #JavaScript

Con URLSearchParams, leo el parámetro de la URL y filtro los posts para mostrar solo los que coincidan con la categoría seleccionada. #FrontEndDeveloper #WebDevelopment #JavaScript

Y esto es lo que hice para poder filtrar los posts, otro día cuento como cree las cards dinámicamente. Ahora me voy a tomar un café y a rezar para que no se rompa nada🥲

Llamo a todos los botones en el script y les paso una función que itera por cada uno de ellos para que aplique el atributo aria-pressed en true o false según sea su estado. #FrontEndDeveloper #WebDevelopment #JavaScript

Al hacer clic en un filtro, la URL se actualiza para incluir el parámetro category correspondiente, permitiendo que la página se filtre dinámicamente según la categoría seleccionada. #FrontEndDeveloper #WebDevelopment #javascript

Para gestionar los artículos del blog, utilizo un array de objetos en JS. Así se ve 👇 #FrontEndDeveloper #JavaScript #WebDevelopment

Para permitir que los usuarios filtren los posts por categoría, utilicé botones con data-category que representan cada categoría. Además cada botón activa un filtro visual y de accesibilidad utilizando aria-pressed para indicar qué categoría está seleccionada. #FrontEndDeveloper

Iré contando poco a poco que he hecho y cómo así de paso refresco la memoría y me sirve de repaso. Hoy voy con los filtros por categoría. #FrontEnd #JavaScript #Webdevelopment

17 Mar 2025

Por qué de un día para otro se rompe el código? Si lo dejé funcionando y perfecto 😭 Socorro

Para poner en práctica todo lo que he aprendido sobre HTML semántico y accesibilidad, estoy creando un blog sencillo. Incluye un buscador, filtros, paginación, comentarios y likes. 🧵Ahí va: #WebDevelopment #HTML #Accessibility #FrontEnd

He comenzado por móvil y de ahí he ido ajustando a dispositivos más grandes. Sigo trabajando en el diseño y en los próximos días empezaré con las funcionalidades, así aprovecho y le pego un buen repaso a JS. Si todo va bien espero tenerlo listo para dentro de una semana 💪

Siendo sincera, no es nada fácil sacarlo adelante con tan poco tiempo libre, pero a pasito de hormiguita también se consiguen cosas😃 Si algo estoy aprendiendo de esto es que un poquito por muy poquito que sea, es mejor que nada🚀 #codingjourney #palante

🔸Contenido principal con <main> 🔸Título con <h1> 🔸Contenedor de filtros con etiquetas <button> y aria-pressed="false" que indican que no están pulsados 🔸Sección de articulos con <section> y <article> cada unos con sus respectivos <time>, <h2>, <p> y <a> #HTML #Accessibility

🔸Footer con un formulario de suscripción, enlaces a cada una de las categorías y a redes sociales. #WebDevelopment #HTML #Accessibility #FrontEnd

Me encanta la parte del diseño. Creé un sistema de diseño e implementé el diseño atómico creando componentes reutilizables para facilitar la escalabilidad y la adaptabilidad a distintos dispositivos. #WebDevelopment #HTML #Accessibility #FrontEnd

🔸<header> mejora la estructura para lectores de pantalla y <nav> define el área de navegación del sitio. 🔸Aria-label="Main navigation" para que los usuarios de tecnologías asistivas puedan identificarla fácilmente. 🔸 Input con <label> esencial para accesibilidad.

Hace unos días empecé a investigar sobre accesibilidad web y me topé con los atributos ARIA. Vi que hay muchos, así que decidí no solo listarlos, sino usarlos en un proyecto real. 🧵 Abro hilo sobre cómo hice un menú de navegación accesible para móviles usando ARIA. ⬇️ #A11y #Frontend #UXDesign

Si por el contrario no contiene la clase “showMenu” esta clase se añadirá, el botón de cierre aparece, el hamburguesa desaparece y el atributo aria-expanded pasa a true ya que el menú está abierto.

Y esto es todo. Seguiré probando con estas prácticas y poniendo a prueba todas los atributos que permiten que cualquier elemento de una web sea accesible. #A11y #Frontend #UXDesign

Primero se comprueba si el menú contiene la clase “showMenu”, si es así eliminará la clase, el botón de cierre se ocultará y el de hamburguesa aparece y el atributo aria-expanded será false. Con esto el menú estará oculto.

Y el último atributo que utilizo es aria-hidden = “true” en los iconos hamburguesa y de cierre ya que estos son meramente decorativos y de esta forma son ignorados por los lectores de pantalla.

Para terminar, el código que permitirá mostrar el menú. Llamo a los elementos del DOM con los que voy a interactuar y los guardo en constantes. La lista con los links, el botón y los iconos hamburguesa y de cierre.

Otro atributo que uso es el de aria-expanded en el botón de menú. Indica si el menú está abierto o cerrado. Por defecto estará cerrado por lo que será = “false”. Con un poco de JavaScript irá cambiando de false a true cuando interactúe con el.

En el botón del menú hamburguesa además añado aria-controls y su valor ha de coincidir con el id de la lista <ul> ya que irán asociados el uno al otro.

Para empezar el uso de HTML semántico super obligado, ya solo con esto la mitad del trabajo está hecho. 🔸 <nav> para la navegación 🔸 <ul> para listas 🔸 <a> para links 🔸 <button> para botones #A11y #Frontend #UXDesign

Aria-label se usa para describir el propósito del elemento: 🔸 <nav aria-label = ”Menú de navegación”> 🔸 <a aria-label="Ir a Twitter"> para iconos sin texto 🔸 <button aria-label="Abrir menú"> ya que solo tiene un icono Así los lectores de pantalla dan info correcta al usuario