DEV Community: AkiDev - Desarrollador de Software Front-end

CSS: El amor-odio que nos une a todos los front-end's

AkiDev - Desarrollador de Software Front-end — Thu, 30 Jan 2025 10:43:29 +0000

Ah, CSS.
Esa cosa que todos decimos que es "súper fácil" cuando empezamos, pero que, con el tiempo, se convierte en nuestro peor enemigo y mejor amigo al mismo tiempo.
¿Quién no ha pasado horas peleando con un div que simplemente no quiere centrarse?
O ese flexbox que prometía ser la solución a todos nuestros problemas, pero termina comportándose como un adolescente rebelde.

Vamos, no miento si digo que CSS es como esa ex que te hace sufrir, pero siempre vuelves a ella porque, en el fondo, sabes que no hay nadie más.

¿Bootstrap?
Sí, está bien para un one-night stand, pero cuando quieres algo serio,

CSS puro y duro es el que manda.
Aunque a veces te haga llorar en la ducha.

Y no me vengas con eso de "usa Tailwind, es más fácil".
Claro, es como decir "usa Uber en lugar de aprender a conducir".

Sí, te salva en el momento, pero ¿qué pasa cuando necesitas algo personalizado? Ahí estás tú, buscando en Stack Overflow cómo hacer que un grid se comporte como quieres, mientras maldices al universo por no haberte hecho nacer backend.

Pero, oye, no todo es sufrimiento.

Cuando por fin logras que ese maldito z-index funcione como debe, o cuando consigues que tu diseño sea responsive sin que se rompa en algún iPhone del año del caldo, la sensación es mejor que encontrar un billete de 20 euros en el bolsillo de un pantalón viejo.

Esa satisfacción, esa victoria, es lo que nos mantiene vivos.

Así que, queridos compañeros frontenders, sigamos adelante.

Porque, aunque CSS nos haga querer arrancarnos los pelos, sabemos que, en el fondo, es nuestro compañero de viaje en este mundo loco del desarrollo web.

Y, quién sabe, tal vez algún día lleguemos a dominarlo por completo... o no.

Pero mientras tanto, seguiremos peleando, riendo y llorando con cada margin: 0 auto; que no hace lo que debería.

¡Nos vemos en los comentarios, colegas!

Y si tienes algún truco mágico para CSS, compártelo, porque todos necesitamos un poco de ayuda en esta montaña rusa emocional llamada front-end. 🚀

¿Te ha pasado algo similar con CSS? ¿O eres de esos raros que lo dominan como si fuera su segundo idioma? Cuéntame tus batallas en los comentarios, ¡aquí no juzgamos! (Bueno, solo un poco). 😉

Cómo crear un Loader Esqueleto con CSS y mejorar la UX de tu app

AkiDev - Desarrollador de Software Front-end — Thu, 23 Jan 2025 20:31:57 +0000

Vale, al lío.
Si estás currando en algo de frontend y quieres darle un toque más molón a tu web o app, los "loaders esqueleto" son la caña.
Vamos, mucho mejor que los típicos spinners que no dicen nada.
Estos loaders hacen que parezca que algo se está cargando ya, y encima quedan bien pro.

Aquí te voy a enseñar a montarte uno fácilmente con HTML y CSS.
Nada de librerías ni historias raras, puro "a pelo".

🔬 El Resultado Final

Antes de darte la chapa, aquí tienes lo que vamos a hacer:

Básicamente, es una tarjeta que parece que se está cargando.
Una imagen, un título y un poco de texto falso.
Pero oye, queda de lujo.

🔎 Por qué molan los Loaders Esqueleto

Parece más rápido: Al usuario le das algo que ver mientras espera. Mucho mejor que dejarle mirando un spinner aburrido.
Quedan más currados: Das una idea de lo que está viniendo, así no piensan que tu app se ha roto.
Son fáciles de hacer: Te lo montas con CSS puro y tirando millas.

✍️ Venga, manos a la obra

Vamos a hacer un loader que imite una tarjeta con una imagen, un título y un poco de texto.

1. HTML Base

Primero monta esta estructura en un archivo HTML:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Skeleton Loader</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="card">
    <div class="skeleton image"></div>
    <div class="skeleton title"></div>
    <div class="skeleton text"></div>
  </div>
</body>
</html>

2. CSS para el Loader

Ahora crea un archivo styles.css y mete este CSS:

/* Estilos básicos */
body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f4f4f4;
}

.card {
  width: 300px;
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Skeleton loader */
.skeleton {
  background-color: #e0e0e0;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.skeleton::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
  animation: shimmer 1.5s infinite;
}

/* Animación del brillo */
@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Variantes del skeleton */
.skeleton.image {
  width: 100%;
  height: 150px;
  margin-bottom: 16px;
}

.skeleton.title {
  width: 70%;
  height: 20px;
  margin-bottom: 12px;
}

.skeleton.text {
  width: 100%;
  height: 14px;
  margin-bottom: 8px;
}

3. Qué hace este CSS

Color y bordes: Usamos un gris claro (#e0e0e0) y bordes redondeados para que parezca algo real.
Brillo molón: La magia está en el linear-gradient que se mueve de lado a lado con la animación shimmer.
Tamaños realistas: Hacemos que cada parte (imagen, título, texto) tenga proporciones similares a las de un contenido real.

⚖️ Extra: Cargar contenido real

Si quieres que después del loader salga el contenido real, mete este script al final del HTML:

<script>
  setTimeout(() => {
    document.querySelector('.card').innerHTML = `
      <img src="https://via.placeholder.com/300x150" alt="Imagen de ejemplo">
      <h3>Título del contenido</h3>
      <p>Este es un texto de ejemplo para la tarjeta.</p>
    `;
  }, 3000); // Simula que tarda 3 segundos en cargar
</script>

Con esto, después de 3 segundos (simulado, claro), el loader desaparece y aparece el contenido real.

📊 Conclusión

Y ya estaría.
Los loaders esqueleto son una manera fácil y elegante de hacer que tu app parezca más rápida y más profesional.
Además, te los montas con cuatro líneas de CSS, así que no hay excusa.

Pruébalo en tus proyectos, y si te mola o tienes alguna duda, cuéntamelo en los comentarios.
¡Nos vemos!

Etiquetas HTML que todo programador principiante debería conocer 💻✨

AkiDev - Desarrollador de Software Front-end — Thu, 16 Jan 2025 07:52:15 +0000

¡Hey, tú! 👋

Sí. Tú.

El que está metiéndose por primera vez en este mundo del desarrollo web. 💻

¿Sabías que HTML es la base de todo lo que ves en una página web? 🕸️

Si no, ahora lo sabes.
Y si ya lo sabías, aquí vengo a contarte sobre las etiquetas HTML que te van a salvar la vida (o al menos te evitarán quedar como un novato total en tu primer proyecto).

`<html>` y `<body>`

Por algún lado hay que empezar, ¿no? 🚀

Estas etiquetas son la estructura básica. 🏗️

<html>: Es la etiqueta madre. Todo tu código HTML vive dentro de ella. Si no la usas, ¿de qué se supone que está hecha tu página?
<body>: Aquí va TODO lo que ves en la pantalla. El contenido, las imágenes, los botones, los memes que subes en tus pruebas de portafolio. Todo.

`<head>`

Esto no se ve directamente en la página, pero es crucial. 🧠

Aquí metes cosas importantes como:

El título de la pestaña (<title>).
Enlaces a tus archivos CSS o JS.
Metadatos que no entiendes ahora pero que Google ama (y deberías aprender pronto).

`<h1>` a `<h6>`

Los títulos.

Hazte un favor y no uses h1 para todo. 🙅‍♂️

Cada etiqueta tiene un tamaño y un nivel de jerarquía:

<h1>: Súper importante. Ideal para el título principal.
<h2> a <h6>: Para subtítulos y otros niveles de importancia.

💡 Pro tip: Usar bien estos niveles te ayuda con el SEO (o sea, que Google te encuentre más fácil).

`<p>`

Tus textos de relleno. ✍️

Aquí metes todo el choro mareador que acompaña tus títulos. Si no sabes qué poner, usa el clásico "Lorem ipsum" para fingir que sabes de qué hablas.

`<a>`

¿Quieres enlaces? Aquí los tienes. 🔗

Ejemplo: <a href="https://tupaginamamada.com">Haz clic aquí</a>.
💡 Pro tip: Usa target="_blank" para que el enlace se abra en otra pestaña. Así no secuestras al usuario en tu página.

`<img>`

Las imágenes son el alma de Internet. 🖼️

Pero no seas tonto, pon siempre el atributo alt. Ejemplo:

<img src="gatito.png" alt="Un lindo gatito que te hace feliz">

Esto es por accesibilidad y porque los motores de búsqueda también leen eso. 🔍

`<ul>`, `<ol>` y `<li>`

Listas para organizar cosas:

<ul>: Lista desordenada (con puntos).
<ol>: Lista ordenada (con números).
<li>: Cada elemento de la lista. Ejemplo:

<ul>
  <li>Aprender HTML</li>
  <li>Quejarte de CSS</li>
  <li>Enamorarme de JavaScript (o no)</li>
</ul>

`<button>`

Un botón que puedes programar para hacer de todo (o nada):

<button onclick="alert('Hola mundo')">Dale clic</button>

El onclick es JavaScript, pero aquí estamos para ver HTML, así que no me quemen por eso. 🔥

`<form>`

Si quieres recolectar datos (como emails o comentarios de odio):

<form action="/enviar-datos" method="POST">
  <input type="text" name="nombre" placeholder="Tu nombre aquí">
  <input type="email" name="correo" placeholder="Tu correo">
  <button type="submit">Enviar</button>
</form>

Con esto puedes crear formularios para lo que quieras. Bueno, para lo que el backend soporte. 📨

`<div>` y `<span>`

<div>: El contenedor universal. Si no sabes qué usar, mete todo en un div (pero no abuses).
<span>: Es como un div, pero para texto o cosas pequeñas.

¿Y ahora qué?

Estas etiquetas son el pan de cada día para cualquier desarrollador web.
No necesitas memorizar todo ahorita, pero sí jugar con ellas y entender para qué sirven.
Y si llegaste hasta aquí, te dejo un consejo final: rompe cosas.
Sí.
Rompe tu código.
Experimenta
Prueba.
¡Así se aprende! 💥

Ahora ve y construye esa página que promete cambiar el mundo 🌎 (o al menos impresionar a tu primo en la cena). 🍽️