DEV Community: Carmen Ansio

Cómo crear un Blob que sigue tu cursor con JavaScript 🚀✨

Carmen Ansio — Tue, 07 Jan 2025 14:31:43 +0000

Si alguna vez has querido darle vida a tu cursor, este tutorial es para ti. Vamos a crear un Blob interactivo que reacciona al movimiento del mouse. ¡Es más fácil de lo que parece y súper divertido! 🌌

Al final, tendrás algo como esto:

🛠 Paso 1: Estructura básica

Primero necesitamos un archivo HTML que contenga un <canvas> (donde dibujaremos los blobs) y un texto que le dé un toque galáctico.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cosmic Blob</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <canvas id="canvas"></canvas>
  <div class="cosmic-text">Cosmic</div>
  <script src="script.js"></script>
</body>
</html>

El texto "Cosmic" es puramente estético, pero le da ese vibe espacial que buscamos.

Ahora vamos con el CSS para darle estilo:

/* styles.css */
body {
  margin: 0;
  overflow: hidden;
  background: #000; /* Fondo negro */
  cursor: none; /* Ocultamos el cursor */
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.cosmic-text {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-family: "Space Mono", serif;
  font-size: 15vw;
  font-weight: 700;
  text-shadow: 0 0 40px #444857, -1px 1px 60px rgba(255, 255, 255, 0.2);
  pointer-events: none; /* Evitamos que el texto interfiera con el mouse */
  z-index: 10; /* Aseguramos que esté por encima del canvas */
}

Esto nos da un canvas que ocupa toda la pantalla y un texto centrado que parece flotar en el espacio.

🎨 Paso 2: Configurar el canvas y detectar el mouse

Ahora pasamos a script.js. Lo primero es configurar el canvas para que cubra la pantalla y ajustar su tamaño automáticamente si la ventana cambia.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Almacenamos la posición del mouse
let mouse = { x: 0, y: 0 };

// Ajustamos el tamaño del canvas al tamaño de la ventana
function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

// Eventos para redimensionar el canvas y detectar el movimiento del mouse
window.addEventListener("resize", resizeCanvas);
window.addEventListener("mousemove", (e) => {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
});

// Inicializamos el canvas
resizeCanvas();

Esto es la base para que podamos dibujar en el canvas y hacer que el blob siga al cursor.

🚀 Paso 3: Movimiento suave con lerp

No queremos que el blob siga al mouse de manera brusca. En su lugar, usaremos interpolación lineal (o lerp) para suavizar el movimiento.

let currentX = 0;
let currentY = 0;

function lerp(start, end, t) {
  return start * (1 - t) + end * t;
}

En cada frame, actualizamos las coordenadas del blob de forma gradual:

currentX = lerp(currentX, mouse.x, 0.1);
currentY = lerp(currentY, mouse.y, 0.1);

Esto hace que el blob parezca más vivo, como si tuviera inercia.

🌌 Paso 4: Dibujar el Blob

Ahora, lo interesante. Vamos a dibujar un gradiente radial que seguirá al cursor y formará nuestro Cosmic Blob.

let time = 0;

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // Limpiamos el canvas
  time += 0.03; // Incrementamos el tiempo para animar

  // Gradiente que sigue al cursor
  const gradient = ctx.createRadialGradient(
    currentX, currentY, 0,
    currentX, currentY, 600
  );
  gradient.addColorStop(0, "#5B21B6");
  gradient.addColorStop(0.4, "#EC4899");
  gradient.addColorStop(0.8, "#3B82F6");
  gradient.addColorStop(1, "#5B21B6");

  ctx.save();
  ctx.filter = "blur(120px)";

  // Dibujamos varios blobs alrededor del cursor
  for (let i = 0; i < 6; i++) {
    const angle = time * 0.5 + (i * Math.PI * 2) / 6;
    const radius = 80 + Math.sin(time * 2 + i) * 40;
    const offsetX = Math.cos(angle) * radius;
    const offsetY = Math.sin(angle) * radius;

    ctx.beginPath();
    ctx.arc(currentX + offsetX, currentY + offsetY, 150, 0, Math.PI * 2);
    ctx.fillStyle = gradient;
    ctx.fill();
  }
  ctx.restore();

  requestAnimationFrame(animate); // Llamamos a la animación en el siguiente frame
}
animate();

🌟 Paso 5: Añadir ruido para un toque orgánico

Queremos que el blob parezca más dinámico, casi como si estuviera vivo. Para eso, añadimos una función de "ruido".

function noise(x, y) {
  const noiseScale = 0.05;
  const amplitude = 50;
  return (
    Math.sin(x * noiseScale + time) *
    Math.cos(y * noiseScale + time * 0.8) *
    amplitude
  );
}

Integramos este ruido en las coordenadas de los blobs para que se deformen de forma natural:

ctx.arc(
  currentX + offsetX + noise(currentX, currentY),
  currentY + offsetY + noise(currentY, currentX),
  150,
  0,
  Math.PI * 2
);

¡Eso es todo! 🎉

Ahora tienes un Blob que sigue al cursor con un movimiento fluido.

Puedes ver el código completo y probarlo en mi CodePen:

Cromo 3D de Pokémon con Scroll driven animations en CSS

Carmen Ansio — Fri, 16 Aug 2024 22:12:32 +0000

Vamos a hacer algo súper chulo: un cromo animado en 3D que gira mientras haces scroll. ¿Lo mejor? No necesitamos ni una sola línea de JavaScript. Vamos a hacerlo todo con HTML y CSS. Te prometo que es más fácil de lo que parece, ¡así que vamos allá!

Paso 1: La Estructura básica en `HTML`

Antes de meternos de lleno en la animación, necesitamos construir la estructura básica de nuestro cromo. Esto lo hacemos en HTML.

<div class="container">
    <div class="card">
        <div class="card__front">
            <img src="https://assets.codepen.io/527512/card_pikachu.jpg" />
        </div>
        <div class="card__front card__front--back">
            <img src="https://assets.codepen.io/527512/card_pokemon.jpg" />
        </div>
    </div>
</div>

¿Qué está pasando aquí?

<div class="container">: Este div es nuestro contenedor principal. Es como una caja que contiene nuestra tarjeta. Lo necesitamos para poder centrar la tarjeta y aplicarle el efecto 3D.
<div class="card">: Aquí tenemos la tarjeta en sí. Piensa en ella como un libro con dos páginas: una delantera y una trasera.
<div class="card__front">: Esta es la parte frontal de la tarjeta, donde colocamos la primera imagen (en este caso, una de Pikachu).
<div class="card__front card__front--back">: Y esta es la parte trasera, con otra imagen (el clásico diseño de carta Pokémon). Notarás que le hemos añadido una clase extra (card__front--back), que luego usaremos en el CSS para que esta cara esté "detrás" de la tarjeta cuando gire.

Paso 2: Agregando estilo con `CSS`

Ahora que tenemos la estructura básica, vamos a darle vida con CSS. Aquí es donde empieza la magia. Vamos a dividirlo en secciones para que sea más fácil de seguir.

body {
    min-block-size: 160dvh;
    display: grid;
    place-content: center;
    background: black;
}

Detalle del código CSS

<body>: Configuramos el cuerpo del documento para que todo esté centrado en la pantalla y le damos un fondo negro. La propiedad min-block-size: 160dvh asegura que el contenido ocupe más de la altura completa de la pantalla, lo que es útil para habilitar el scroll.

.container {
    --width: 240px;
    --height: 330px;
    width: 100vw;
    display: flex;
    justify-content: center;
    perspective: 300px;

<container>: Aquí es donde las cosas se ponen interesantes. Estamos definiendo las dimensiones de nuestra tarjeta usando variables CSS (--width y --height). Además, estamos usando perspective: 300px, que es lo que le da ese efecto 3D. Esta propiedad crea la sensación de profundidad, como si el cromo estuviera flotando en el espacio.

    .card {
        position: relative;
        width: var(--width);
        height: var(--height);
        cursor: pointer;
        transition: 1.1s ease-in-out;
        transform-style: preserve-3d;

        /* Aquí se define la animación de la tarjeta */
        animation: rotate ease-in-out;
        animation-timeline: scroll(); /* Asociando la animación al scroll */
    }

.card: Este es el estilo del cromo. Le damos un tamaño usando las variables definidas antes. La propiedad transform-style: preserve-3d es crucial porque asegura que las caras de la tarjeta se comporten como partes de un objeto 3D.
animation: rotate ease-in-out: Aquí es donde le decimos al cromo que gire. Esta animación se ejecutará con una transición suave (ease-in-out) cada vez que haya scroll.
animation-timeline: scroll(): Este es el truco del scroll. Con esta propiedad, vinculamos la animación al desplazamiento de la página. Así, el cromo girará a medida que bajes o subas.

.card__front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-box-reflect: below -12px linear-gradient(transparent, #00000000, rgb(0
                    0 0 / 14%));

    img {
        width: var(--width);
        height: var(--height);
        object-fit: cover;
        border-radius: 1rem;
    }

    &--back {
        transform: rotateY(0.5turn);
    }
}

Detalle del estilo de las caras del cromo

.card__front**: Le damos a cada cara de la tarjeta una posición absoluta para que se superpongan correctamente. backface-visibility: hidden asegura que la cara que no está mirando hacia nosotros no sea visible (evitando ese feo parpadeo cuando gira).
.card__front img: Estilizamos las imágenes para que se ajusten al tamaño del cromo y se vean bien, aplicando un borde redondeado (border-radius: 1rem) para un toque más parecido al original.
&--back: Aquí viene la parte clave para la cara trasera. Usamos transform: rotateY(0.5turn) para girarla 180 grados (media vuelta) en el eje Y, colocándola detrás del front del cromo. Esto es lo que hará que parezca que el cromo tiene dos lados.

@keyframes rotate {
    to {
        transform: rotateY(1turn); /* Gira la tarjeta 360 grados */
    }
}

@keyframes rotate: Este es el motor de nuestra animación. Básicamente, estamos diciendo: "oye, cromo, cuando te animes, gira 360 grados en el eje Y". Al hacer scroll, esta rotación se va a activar, gracias a la propiedad animation-timeline que vinculamos antes.

¿Qué son las animaciones basadas en Scroll (Scroll-Driven Animations)?

Las scroll-driven animations (animaciones basadas en scroll) son una técnica en la que el desplazamiento (scroll) de la página se utiliza como disparador para iniciar, controlar o influir en una animación. Tradicionalmente, esto se hacía con JavaScript, manipulando el DOM para detectar el desplazamiento y ajustar propiedades CSS en consecuencia.

Pero ahora, gracias a las nuevas capacidades de CSS, ¡podemos hacer todo esto sin una sola línea de JavaScript! Con propiedades como scroll-timeline y animation-timeline, podemos vincular el progreso de una animación directamente al scroll, creando efectos súper suaves y bien sincronizados que antes solo eran posibles con JavaScript.

¿Por qué deberías usarlas?

Rendimiento: Las animaciones en CSS suelen ser más rápidas y suaves porque están optimizadas por el navegador. No tienes que preocuparte por la sobrecarga de scripts.
Facilidad de mantenimiento: Es mucho más sencillo mantener y ajustar tu código cuando todo está en una hoja de estilos. No hay funciones complejas de JavaScript a las que hacer seguimiento.
Interactividad mejorada: Añadir animaciones que respondan al desplazamiento de la página mejora la experiencia del usuario, haciendo que tu sitio se sienta más dinámico y vivo.

Paso 3: Experimenta y personaliza

Ya tienes la base, pero esto es solo el comienzo. Puedes jugar con los valores de perspective, width, height, y la duración de la animación (transition: 1.1s). ¿Qué pasa si cambias el tiempo? ¿O si usas otras imágenes? ¡Las posibilidades son infinitas!

Por ejemplo, podrías cambiar perspective a un valor mayor o menor y ver cómo eso afecta la profundidad 3D del cromo. También puedes ajustar la velocidad de la rotación para hacerla más rápida o más lenta, dependiendo de lo que mejor se ajuste a tu proyecto.

¡Comparte tu versión!

Y ahí lo tienes, un cromo animado en 3D que gira mientras haces scroll, ¡y todo solo con HTML y CSS! Lo más importante aquí es experimentar y divertirse. No tengas miedo de romper las cosas; es así como se aprende.

¡Comparte lo que hagas! Estoy deseando ver qué increíbles cards y efectos 3D crearás con esta técnica.

Dive into the art of CSS drawing

Carmen Ansio — Mon, 08 Jan 2024 08:14:17 +0000

CSS, or Cascading Style Sheets, isn't just about giving your web pages a neat appearance. It's a robust language that lets you unleash your creativity far beyond mere layout and design. Imagine crafting stunning drawings and illustrations using nothing but CSS! In this piece, we're going to delve into the exciting journey of learning CSS drawing by actually creating art with CSS.

Embarking on the journey

Before we immerse ourselves in the artistic side of CSS, it's crucial to have a solid grasp of its basics. If CSS still feels new to you, I'd suggest starting with some beginner tutorials or courses. Get comfortable with its syntax and fundamental concepts – it's going to be your canvas and paintbrush for your digital art!

Mastering CSS positioning

At the heart of CSS drawing lies the mastery of CSS positioning. CSS offers a variety of positioning properties, letting you meticulously place elements on your web page. The most frequently used ones include position: static, relative, absolute, and fixed.

Static positioning

In static positioning, elements follow the normal flow of the document. They don't react to top, bottom, left, or right properties.

<div class="box"></div>

.box {
  position: static;
}

Relative positioning

Relative positioning nudges an element from its normal spot. You can use top, bottom, left, and right properties to adjust its position.

<div class="box"></div>

.box {
  position: relative;
  top: 20px;
  left: 50px;
}

Absolute positioning

With absolute positioning, an element is placed relative to its nearest positioned ancestor. Without such an ancestor, it's positioned relative to the initial containing block, often the viewport.

<div class="box"></div>

.box {
  position: absolute;
  top: 100px;
  left: 200px;
}

Fixed positioning

Fixed positioning is akin to absolute positioning, but the element is fixed relative to the viewport. It remains in place even when the page is scrolled.

<div class="box"></div>

.box {
  position: fixed;
  top: 50px;
  right: 0;
}

The art of CSS drawing

With a good grasp of CSS positioning, we're ready to start our artistic journey. CSS drawing is all about creatively using properties and values to craft shapes, patterns, and illustrations.

Crafting basic shapes

CSS lets you create basic shapes like squares, circles, and triangles. For instance, a circle can be made using the border-radius property:

<div class="circle"></div>

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
}

Designing complex illustrations

For more intricate illustrations, combine various CSS properties and values. Use transform to rotate and scale elements, and box-shadow to add depth:

<div class="illustration"></div>

.illustration {
  width: 200px;
  height: 200px;
  background-color: blue;
  transform: rotate(45deg) scale(1.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

Animating your CSS creations

What's more thrilling than bringing your CSS drawings to life? CSS animations let you animate properties over time, adding dynamism to your art. Use the @keyframes rule for defining animations and the animation property to apply them:

<div class="spinner"></div>

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner {
  width: 100px;
  height: 100px;
  border: 5px solid black;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

Wrapping up

CSS drawing isn't just a skill, it's a doorway to a world where code meets art. By mastering CSS positioning and getting creative with properties, you can create stunning visuals right in your stylesheet. So, why not start your CSS drawing adventure today?

Remember, this is more than just an educational article. It's a reminder that CSS drawing complements, not replaces, traditional graphic design tools. Let your imagination run wild with CSS!

Creating a modular typography scale with CSS

Carmen Ansio — Sat, 06 Jan 2024 17:24:22 +0000

Typography is a crucial aspect of web design that greatly impacts the readability and aesthetics of a website. In this article, we will explore how to create a modular typography scale using CSS. We will cover the use of custom properties, responsive fonts, and delve into the theory of vertical rhythm.

Custom Properties for Typography

CSS custom properties, also known as CSS variables, allow us to define reusable values that can be used throughout our stylesheets. They provide a convenient way to create a modular typography scale.

To start, let's define our base font size using a custom property:

:root {
  --base-font-size: 16px;
}

We can then use this custom property to calculate the font sizes for different elements in our typography scale. For example, if we want to create a heading style, we can define the font size relative to the base font size:

h1 {
  font-size: clamp(
    calc(var(--base-font-size) * 1.5),
    2rem,
    3rem
  );
}

h2 {
  font-size: clamp(
    calc(var(--base-font-size) * 1.2),
    1.5rem,
    2.5rem
  );
}

h3 {
  font-size: clamp(
    var(--base-font-size),
    1rem,
    2rem
  );
}

By using the clamp function, we can set a range of acceptable font sizes for each heading element. The clamp function takes three arguments: the minimum font size, the preferred font size, and the maximum font size. This ensures that the font sizes scale responsively while staying within the specified range.

Responsive Fonts

With the increasing variety of devices and screen sizes, it is essential to ensure that our typography is responsive. Responsive fonts adapt to different screen sizes, providing optimal readability and user experience.

One approach to achieving responsive fonts is by using the vw unit, which represents a percentage of the viewport width. We can combine this unit with media queries to define different font sizes for different screen sizes.

h1 {
  font-size: clamp(
    calc(var(--base-font-size) * 1.5),
    2rem,
    3rem
  );
}

@media (max-width: 768px) {
  h1 {
    font-size: clamp(
      calc(var(--base-font-size) * 1.2),
      1.5rem,
      2.5rem
    );
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: clamp(
      var(--base-font-size),
      1rem,
      2rem
    );
  }
}

In the example above, the font size for h1 will be reduced as the viewport width decreases, ensuring that the text remains readable on smaller screens.

Vertical Rhythm

Vertical rhythm is a design principle that focuses on maintaining consistent spacing between elements vertically. It helps create a harmonious and visually pleasing layout.

To achieve vertical rhythm, we can use the line-height property to set the height of each line of text. The ideal line height is typically around 1.5 times the font size.

body {
  font-size: var(--base-font-size);
  line-height: clamp(
    calc(var(--base-font-size) * 1.5),
    2rem,
    3rem
  );
}

By setting the line height relative to the base font size using the clamp function, we ensure that the spacing between lines remains consistent throughout the typography scale.

Custom Properties for a Modular Typography Scale with Clamp
Incorporating the clamp function into our modular typography scale enhances responsiveness and scalability. The clamp function allows us to define a minimum, preferred, and maximum font size, ensuring that our typography adapts gracefully across different devices.

Defining the Scale with Clamp

We'll redefine our custom properties using clamp to provide more flexibility and responsiveness:

:root {
  --scale-ratio: 1.333; /* Example: Major Third (1.333) */
  --font-size-1: clamp(14px, 1rem, 16px); /* Adjust min, preferred, and max values as needed */
  --font-size-2: clamp(18px, calc(var(--font-size-1) * var(--scale-ratio)), 20px);
  --font-size-3: clamp(24px, calc(var(--font-size-2) * var(--scale-ratio)), 28px);
  --font-size-4: clamp(32px, calc(var(--font-size-3) * var(--scale-ratio)), 36px);
  --font-size-5: clamp(42px, calc(var(--font-size-4) * var(--scale-ratio)), 48px);
  /* Continue adding levels as needed */
}

Applying the Scale with Clamp
Now, let's apply these clamped font sizes to our elements:

h1 {
  font-size: var(--font-size-5);
}

h2 {
  font-size: var(--font-size-4);
}

h3 {
  font-size: var(--font-size-3);
}

p, li, a {
  font-size: var(--font-size-1); /* Base font size for regular text */
}

Responsive Adjustments with Clamp

The beauty of using clamp is that it reduces the need for extensive media queries. However, you can still make adjustments for specific cases if needed:

@media (max-width: 768px) {
  :root {
    --font-size-5: clamp(38px, calc(var(--font-size-4) * 0.8), 44px);
    --font-size-4: clamp(30px, calc(var(--font-size-3) * 0.8), 34px);
    /* Adjust other sizes as needed */
  }
}

Conclusion

Creating a modular typography scale with CSS allows us to maintain consistency and flexibility in our web designs. By using custom properties, responsive fonts, and considering vertical rhythm, we can achieve a visually appealing and readable typographic system.

By integrating the clamp function into our modular typography scale, we achieve a more responsive and adaptable typographic system. This approach ensures that our text sizes are flexible and appropriate for various screen sizes, enhancing the overall user experience.

Experiment with different minimum, preferred, and maximum values in the clamp function to tailor the typography to your specific design needs. Happy coding!

Responsive fonts in CSS

Carmen Ansio — Sat, 06 Jan 2024 14:30:41 +0000

Let's explore a super useful and modern technique to make our fonts responsive, using the CSS clamp() function along with custom properties. Let's get started!

Introduction to clamp()

The clamp() function in CSS is a powerful tool that allows us to set a font size (or any other property) within a specific range. This means we can have more precise control over how our content looks on different screen sizes.

Step 1: Define Custom Properties

First, we define the custom properties in our style sheet:

:root {
    --font-min: 16px; /* Minimum size */
    --font-max: 32px; /* Maximum size */
    --font-preferred: 2vw; /* Preferred size */
}

These variables will allow us to easily adjust our font sizes throughout the project.

Step 2: Apply clamp()

Now, we apply clamp() to our desired element:

body {
    font-size: clamp(var(--font-min), var(--font-preferred), var(--font-max));
}

With this code, the font size will automatically adjust within the defined range.

Step 3: Adjustments and Customization

Feel free to adjust the values of --font-min, --font-max, y --font-preferred to suit your needs. This technique can be applied to any element, not just the font size of the document.

Conclusion

And that's it! With a few simple steps, we have created fonts that perfectly adapt to different screen sizes, improving the readability and aesthetics of our websites.

Do you have questions or suggestions? Share what you think in the comments!

Button animation hover with CSS

Carmen Ansio — Sun, 05 Dec 2021 18:21:03 +0000

What properties can we animate with CSS?

The animation property allows us animate CSS properties as:

color
position
opacity

“Can I animate?” is a site inspired by Can I use, but focused specifically on CSS animations and transitions.

Animating with CSS

The CSS Animation with keyframes is created defining two main parameters, keyframes and the animation declaration, this allows you to be able to define the animation controlling the time.

The keyframes are defined using the @keyframes at-rule.

@keyframes frankenstein {
    0% {
        transform: translate(-50%, -75%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -75%) rotate(360deg);
    }
}

You can also define from and to instead of percentages.

Then you have two ways to using the syntax of the animation declaration. The shorthand or the long one.

button  {
    animation: frankenstein 5s ease-in infinite;
}

button  {
    animation-name: frankenstein;
    animation-duration: 5s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
}

In this animation, we have just two keyframes.

Herramienta para auditar CSS

Carmen Ansio — Sun, 17 Oct 2021 17:03:17 +0000

Yellow Lab

Herramienta gratuita para que podáis auditar la performance de cualquier web.

También podréis medir la complejidad del CSS, con info práctica sobre cómo resolver cualquier problema.

Charla de animación SVG

Carmen Ansio — Sun, 17 Oct 2021 09:58:58 +0000

CSS Conf Medellín 2021

Material

Charla en youtube
Las Slides
Codepen con la Animación SVG Files

¿Cómo podemos auditar las Core Web Vitals?

Carmen Ansio — Sat, 16 Oct 2021 20:50:24 +0000

Hace ya más de un año, allá por mayo de 2020 que Google nos anunció la incorporación de 3 nuevas métricas, "Core Web Vitals" poniendo la experiencia del usuario en el centro.

El Chrome User Experience Report o CrUX, es un dataset que puedes encontrar en BigQuery se actualizada cada mes con datos de campo de usuarios de Google Chrome.

Seguro que estas siglas os suenan, y además son las métricas más importantes:

Largest Contentful Paint — LCP
LCP mide el rendimiento de carga. ¿Cuánto tarda el contenido en pintarse en la página?
First Input Delay — FID
FID es la capacidad de respuesta de la interfaz. ¿Con qué rapidez responde la página a las acciones del usuario?
Cumulative Layout Shift — CLS
CLS mide la estabilidad visual. ¿El contenido se mueve de forma inesperada en la página?
¿Cómo podemos tener controladas estas métricas tan importantes y evaluarlas de la manera más efectiva?
¿Qué herramientas tenemos a nuestra disposición?

¡Gracias por leer!

Intro to Core Web Vitals

Carmen Ansio — Sat, 16 Oct 2021 20:01:19 +0000

The heart of the Google Core Web Vitals update are the new performance metrics which aim to get the user experience. It's not about technical performance, is about feeling fast...

Core Web Vitals metrics

Largest Contentful Paint — LCP loading metric
LCP measures loading performance. How quickly is content drawn to the page?
First Input Delay — FID interactivity metric
FID interface responsiveness. How quickly does the page respond to user actions?
Cumulative Layout Shift — CLS visual stability metric
CLS measures visual stability. Does content move unexpectedly on the page?

How can I calculate scores on my local device?

With these Core Web Vitals tools:

Conclusion

The user experience is very important because it aims to provide positive experiences that keep a user loyal to the product or brand.

I hope this article helps you get up and running with it. Thanks for reading!

DEV Community: Carmen Ansio

Cómo crear un Blob que sigue tu cursor con JavaScript 🚀✨

🛠 Paso 1: Estructura básica

🎨 Paso 2: Configurar el canvas y detectar el mouse

🚀 Paso 3: Movimiento suave con lerp

🌌 Paso 4: Dibujar el Blob

🌟 Paso 5: Añadir ruido para un toque orgánico

¡Eso es todo! 🎉

Cromo 3D de Pokémon con Scroll driven animations en CSS

Paso 1: La Estructura básica en HTML

¿Qué está pasando aquí?

Paso 2: Agregando estilo con CSS

Detalle del código CSS

Detalle del estilo de las caras del cromo

¿Qué son las animaciones basadas en Scroll (Scroll-Driven Animations)?

¿Por qué deberías usarlas?

Paso 3: Experimenta y personaliza

¡Comparte tu versión!

Dive into the art of CSS drawing

Embarking on the journey

Mastering CSS positioning

Static positioning

Relative positioning

Absolute positioning

Fixed positioning

The art of CSS drawing

Crafting basic shapes

Designing complex illustrations

Animating your CSS creations

Wrapping up

Creating a modular typography scale with CSS

Custom Properties for Typography

Responsive Fonts

Vertical Rhythm

Defining the Scale with Clamp

Responsive Adjustments with Clamp

Conclusion

Responsive fonts in CSS

Introduction to clamp()

Step 1: Define Custom Properties

Step 2: Apply clamp()

Step 3: Adjustments and Customization

Conclusion

Button animation hover with CSS

What properties can we animate with CSS?

Animating with CSS

Herramienta para auditar CSS

Charla de animación SVG

Material

¿Cómo podemos auditar las Core Web Vitals?

Intro to Core Web Vitals

Core Web Vitals metrics

How can I calculate scores on my local device?

Conclusion

Paso 1: La Estructura básica en `HTML`

Paso 2: Agregando estilo con `CSS`