Tiempo de lectura: 2 minutosSe va a crear un sistema de temas dinámico profesional con CSS variables para crear un tema oscuro, normal o de una marca. Primero definimos la estructura de variables en :root.No ponemos colores directos en componentes. Solo usamos variables semánticas. Clave profesional:No llames a una variable –blue. Llámala –color-primary.Así puedes cambiar el color sin cambiar … Leer más
Tiempo de lectura: 2 minutosEsto es especialmente potente si quieres que tu web sea consistente, mantenible y responsive sin depender de 50 media queries. Un sistema de diseño no es solo “que se vea bonito”. Es tener reglas claras y reutilizables para: En lugar de repetir valores por toda la hoja de estilos, vamos a centralizar todo en variables … Leer más
Tiempo de lectura: 2 minutosLas variables en CSS (también llamadas custom properties) permiten guardar valores reutilizables, como colores, tamaños o espaciados, para usarlos en múltiples lugares del código.Si cambias el valor en un sitio, se actualiza en todos los lugares donde se use. Son especialmente útiles si estás trabajando en proyectos grandes tipo web HTML o en React o … Leer más
Tiempo de lectura: 2 minutosVamos a mejorar el tutorial de modo oscuro para que el modo oscuro se active automáticamente según la configuración del sistema o la hora del día. 🔹 1. Configurar Tailwind CSS (Si aún no lo hiciste) Si aún no tienes Tailwind instalado, agrégalo: En tailwind.config.js, aseguramos que el modo oscuro se base en clases: 🔹 … Leer más
Tiempo de lectura: 2 minutosCómo añadir modo oscuro con React y Tailwind CSS de forma manual. 1️⃣ Configurar Tailwind CSS Si aún no tienes Tailwind instalado en tu proyecto, agrégalo con: Luego, en tailwind.config.js, habilita el modo oscuro basado en clases: 2️⃣ Crear un Hook para manejar el modo oscuro Creamos un hook useDarkMode.ts que guarda la preferencia en … Leer más
Tiempo de lectura: < 1 minutoEl comportamiento lento del scroll en Chrome puede deberse a varios factores específicos del navegador o de la configuración en React Web. Para solucionar el comportamiento lento de scroll en Chrome añadiremos el siguiente código dentro del estilo del contenedor qué realiza el scroll: Habilita will-change: transform en CSS: Para las secciones que necesitan rendimiento … Leer más
Tiempo de lectura: < 1 minutoBuenos dias, hoy os muestro un breve ejemplo de como sería: Esto por norma general, como ya sabemos, devuelve puntitos, si nosotros en vez de puntitos queremos que devuelva números, sin ser una lista numerada, nuestro css, debe quedar de la siguiente manera: Este código CSS se utiliza para numerar los elementos de una lista … Leer más
Tiempo de lectura: 2 minutosEn este ejemplo vamos a ver cómo generar dinámicamente opciones para un elemento select en HTML utilizando datos JSON y JavaScript. Primero muestro el array de elementos que vamos a usar de ejemplo: Después, crearemos una función llamada crearSelect que tomará los datos del JSON y generará las opciones para un elemento select en HTML … Leer más
Tiempo de lectura: 2 minutosEn este ejemplo voy a mostrar una estructura básica para realizar una solicitud AJAX tipo GET con jQuery en JavaScript. Primero, definimos los parámetros de la solicitud AJAX. Aquí, establecemos la URL a la que enviaremos la solicitud, el tipo de solicitud que será GET y el tipo de datos esperados en la respuesta (en … Leer más
Tiempo de lectura: 2 minutosEn este ejemplo voy a mostrar una estructura básica para realizar una solicitud AJAX tipo POST con jQuery en JavaScript. Primero, definimos los parámetros de la solicitud AJAX. Aquí, establecemos la URL a la que enviaremos la solicitud, el tipo de solicitud que será POST y el tipo de datos (en este caso, JSON). Después … Leer más
