Uso y diferencias de cómo usar meter y progress de HTML5 HTML5 introdujo nuevas etiquetas que permiten construir componentes de interfaz de usuario comunes sin necesidad de JavaScript adicional. Dos de estos elementos son <progress> y <meter>, útiles para mostrar progreso de tareas y mediciones dentro de un rango conocido, respectivamente. Al final del artículo tendrás un ejemplo aplicado.

El mundo del diseño web está en constante evolución, y CSS sigue introduciendo propiedades que nos dan mayor control sobre la presentación del texto. Una de las adiciones más interesantes recientemente es la propiedad text-wrap, que permite a los desarrolladores definir con precisión cómo se comportan los saltos de línea en nuestros textos, algo que se necesitaba hace mucho tiempo.

En el mundo del diseño web, la adaptabilidad es clave. Ya tenemos @media para adaptar nuestros estilos a distintos tamaños de pantalla, pero ¿qué pasa si queremos que un componente cambie su estilo según el tamaño de su contenedor y no del viewport? Ahí entra en juego una nueva y poderosa herramienta: @container. En este artículo te explico qué es, cómo se usa y te muestro ejemplos prácticos para que empieces a usarlo hoy mismo.

Una tarea común en el diseño es aplicar transparencia a un color, y con técnicas más actuales, colores definidos como variable. Esto puede lograrse con pre-procesadores CSS y nativamente utilizando combinaciones de sintaxis modernas como rgba(), hsla() y otros ya soportados ampliamente. Este artículo explica cómo manejar esta necesidad técnica con ejemplos prácticos.

En un Design System que estoy trabajando actualmente, el stack consiste en: Vite, Vue, Ant Design System (Antdv) y otras librerías. Mi intención es customizar Antdv con tal de no crear nuevas clases o sobreescribir estilos sino nativamente crear la identidad gráfica, a través de custom variables de Antdv. El proceso no fue corto y finalmente encontré la receta, la que muestro en este artículo con tal de ayudar a alguien más.

Este artículo contiene pensamientos, experiencias personales y mucha observación de comportamiento. Espero sea útil. Tenía reservada una hora médica y al pagar le pregunto a la asistente: «¿Para reservar un examen radiológico lo puedo hacer aquí mismo?» A lo que me responde: «No señorito, lo hace en el piso 1 o por internet o envía un correo a qwerty@examenes.xyz». Me siento a esperar mi hora y observo un tótem donde con tu identificación obtienes un número para que te atienda un humano, como lo acababa de hacer.

HTML5 hace años incorporó varios nuevos tipos de input, entre ellos el search. Este nuevo input -aparte de semántico- coloca una ✕ para borrar el valor ingresado en el input y comenzar de nuevo con la búsqueda.

Hace ya varios meses que diferentes sistemas operativos y aplicaciones traen como opcional el dark-mode, donde todo lo claro se ha vuelto oscuro. ¿Moda, accesibilidad? Realmente no he indagado, pero eso trae pequeños problemas en cuanto al uso de navegadores web. Me topé con uno en específico que me llevó a escribir este artículo. Hechos: Navegando por Internet y con varios enlaces abiertos, veo que un favicon de color negro apenas se nota en el tab de color gris oscuro.

Spambots aman scrapear páginas para sacar emails para, evidentemente, mandar email spam. En este corto artículo presentaré la técnica que he utilizado y ha sido efectivo, además la encuentro simple entre varias que analicé. Incluye HTML, CSS y opcional (puedes seguir utilizando href=“mailto:nombre@email.com” un poco de JavaScript para hacerle aún más difícil el trabajo al spambot.

Existe una propiedad CSS que remueve todas los estilos aplicados por el browser a un selector y la deja sin nada, desnuda y cruda. No me refiero a un reseter, menos a un normalizer. La propiedad all: unset; aplicada a un selector, por ejemplo, un <input />, <button>, <select> y muchos otros que tienen diferencias de render entre browsers, puedes remover todo estilo aplicado por defecto y crear los tuyos de cero sin tener que sobre-escribirlos.