Promise.all es un método estático disponible en JavaScript que se utiliza para manejar múltiples promesas simultáneamente. Permite ejecutar varias operaciones asincrónicas de forma paralela y esperar a que todas se completen antes de proceder con alguna acción adicional.

<p><code>Promise.all</code> es un método estático disponible en JavaScript que se utiliza para manejar múltiples promesas simultáneamente. Permite ejecutar varias operaciones asincrónicas de forma paralela y esperar a que todas se completen antes de proceder con alguna acción adicional. Aquí te explico en detalle qué es <code>Promise.all</code>, cómo funciona y cuándo se utiliza.</p><h3>¿Qué es <code>Promise.all</code>?</h3><p><code>Promise.all</code> es una función integrada en JavaScript que toma un iterable de promesas como entrada y devuelve una nueva promesa que se resuelve cuando todas las promesas del iterable se han resuelto, o se rechaza tan pronto como una de las promesas del iterable es rechazada. Es extremadamente útil cuando se necesita esperar a múltiples operaciones asincrónicas al mismo tiempo y proceder solo cuando todas hayan finalizado con éxito.</p><h3>Sintaxis de <code>Promise.all</code>:</h3><pre><code class="language-javascript">Promise.all(iterable);</code></pre><ul><li><p><code>iterable</code>: Un iterable (como un array) que contiene las promesas que se desean esperar.</p></li></ul><h3>Funcionamiento de <code>Promise.all</code>:</h3><ol><li><p><strong>Resolución Exitosa</strong>: <code>Promise.all</code> espera a que todas las promesas en el iterable se resuelvan satisfactoriamente. Luego, devuelve un array con los resultados de cada promesa en el mismo orden que fueron proporcionadas.</p></li><li><p><strong>Rechazo</strong>: Si alguna de las promesas del iterable es rechazada (independientemente de si otras se han resuelto o no), la promesa devuelta por <code>Promise.all</code> también se rechazará con la razón (o error) de la primera promesa que se rechazó.</p></li></ol><h3>Ejemplo de uso de <code>Promise.all</code>:</h3><pre><code>let promesa1 = new Promise(resolve =&gt; setTimeout(() =&gt; resolve('Uno'), 1000));
let promesa2 = new Promise(resolve =&gt; setTimeout(() =&gt; resolve('Dos'), 2000));
let promesa3 = new Promise(resolve =&gt; setTimeout(() =&gt; resolve('Tres'), 3000));

Promise.all([promesa1, promesa2, promesa3])
    .then(resultados =&gt; {
        console.log(resultados); // Output: ['Uno', 'Dos', 'Tres']
        // Aquí puedes continuar con el código después de que todas las promesas se hayan resuelto
    })
    .catch(error =&gt; {
        console.error('Al menos una promesa fue rechazada:', error);
    });</code></pre><p>En este ejemplo:</p><ul><li><p>Creamos tres promesas (<code>promesa1</code>, <code>promesa2</code>, <code>promesa3</code>) que se resuelven después de 1, 2 y 3 segundos respectivamente.</p></li><li><p><code>Promise.all</code> espera a que todas estas promesas se resuelvan.</p></li><li><p>Una vez que todas las promesas se han resuelto, el método <code>then</code> se ejecuta y obtenemos un array con los resultados de cada promesa en el mismo orden en que se pasaron al <code>Promise.all</code>.</p></li></ul><h3>Ventajas de <code>Promise.all</code>:</h3><ul><li><p><strong>Paralelismo</strong>: Permite ejecutar múltiples operaciones asincrónicas simultáneamente, mejorando el rendimiento y la eficiencia del código.</p></li><li><p><strong>Gestión de Errores</strong>: Facilita la gestión centralizada de errores a través del método <code>catch</code>, lo que hace más fácil manejar errores de múltiples promesas.</p></li><li><p><strong>Legibilidad</strong>: Ayuda a escribir código más claro y estructurado al evitar anidamientos excesivos de callbacks o promesas.</p></li></ul><h3>Consideraciones al usar <code>Promise.all</code>:</h3><ul><li><p><strong>Tiempos de Ejecución</strong>: La ejecución de <code>Promise.all</code> se detendrá y esperará a que todas las promesas se resuelvan o una se rechace, lo cual puede afectar el rendimiento si algunas promesas tardan mucho en resolverse.</p></li><li><p><strong>Iterables</strong>: El argumento pasado a <code>Promise.all</code> debe ser un iterable (como un array). Si se pasa algo que no sea iterable, se lanzará un error.</p></li></ul>

¿Qué es Promise.all?

Observar cómo los usuarios interactúan con el software es fundamental. Esto revela patrones de comportamiento comunes, ayuda a diseñar interfaces más intuitivas y evita el sesgo de asumir que todos piensan como los programadores.

<p>Observar cómo los usuarios interactúan con el software es fundamental. Esto revela patrones de comportamiento comunes, ayuda a diseñar interfaces más intuitivas y evita el sesgo de asumir que todos piensan como los programadores. Es más efectivo que depender solo de la retroalimentación verbal, ya que las acciones de los usuarios a menudo difieren de lo que dicen necesitar. </p><ol><li><p><strong>El sesgo de consenso falso:</strong></p><ul><li><p><strong>¿Qué es?</strong> Es la tendencia a pensar que todos piensan y actúan como nosotros.</p></li><li><p><strong>Ejemplo:</strong> Suponer que todos los usuarios entienden los términos técnicos que usamos como programadores.</p></li></ul></li><li><p><strong>La importancia de observar a los usuarios:</strong></p><ul><li><p><strong>¿Por qué es crucial?</strong> Los usuarios no piensan como los programadores. Observarlos nos permite entender cómo realmente interactúan con el software.</p></li><li><p><strong>Ejemplo:</strong> Observar a un usuario intentando completar una tarea como "Calcular gastos del último mes" nos muestra dónde se atascan y qué áreas de la interfaz les resultan confusas.</p></li></ul></li><li><p><strong>Patrones de comportamiento comunes:</strong></p><ul><li><p><strong>¿Qué son?</strong> Son formas típicas en las que los usuarios intentan realizar tareas.</p></li><li><p><strong>Ejemplo:</strong> Los usuarios tienden a intentar completar las tareas en el mismo orden y cometen errores similares en los mismos lugares.</p></li></ul></li><li><p><strong>Diseñar alrededor del comportamiento del usuario:</strong></p><ul><li><p><strong>¿Cómo hacerlo?</strong> En lugar de diseñar basándonos en nuestras propias suposiciones, diseñamos alrededor de cómo los usuarios interactúan realmente con el software.</p></li><li><p><strong>Ejemplo:</strong> Ofrecer una única manera obvia de realizar una tarea en lugar de múltiples opciones confusas.</p></li></ul></li><li><p><strong>Discrepancia entre lo que dicen y lo que hacen:</strong></p><ul><li><p><strong>¿Por qué ocurre?</strong> Los usuarios pueden expresar lo que piensan que quieren, pero sus acciones pueden revelar necesidades diferentes.</p></li><li><p><strong>Ejemplo:</strong> Un usuario puede decir que necesita una función compleja, pero en realidad prefieren una solución más sencilla y directa.</p></li></ul></li><li><p><strong>Uso de observación en lugar de solo retroalimentación verbal:</strong></p><ul><li><p><strong>¿Por qué es más efectivo?</strong> Observar a los usuarios en acción revela detalles que las respuestas verbales pueden pasar por alto.</p></li><li><p><strong>Ejemplo:</strong> Pasar una hora viendo cómo los usuarios interactúan con una versión preliminar del software proporciona más información que una reunión de un día discutiendo sus necesidades.</p></li></ul></li></ol><h3>Conclusión</h3><p>Diseñar software efectivo no se trata solo de funcionalidad, sino también de comprender profundamente a los usuarios y cómo interactúan con la tecnología. Observar activamente a los usuarios nos ayuda a identificar problemas reales y diseñar soluciones que sean intuitivas y satisfactorias. Esta aproximación no solo mejora la usabilidad del producto final, sino que también reduce la confusión y las complicaciones innecesarias para los usuarios finales.</p>

Descubre el secreto del buen diseño: Observa cómo piensan tus usuarios

Aprende las prácticas clave para escribir código más claro y fácil de mantener. Mejora tu eficiencia y calidad de desarrollo con consejos prácticos y ejemplos.

<p>Escribir código no se trata solo de que funcione, sino también de hacerlo de manera que sea fácil de entender, mantener y escalar. A continuación, exploraremos diez prácticas fundamentales con ejemplos prácticos para ayudarte a mejorar la calidad y la longevidad de tu código.</p><h4>1. Utiliza Nombres de Variables Significativos</h4><p>Los nombres de variables deben ser descriptivos y representativos de su propósito. Evita nombres genéricos como <code>x</code> o <code>temp</code>.</p><pre><code class="language-javascript">// Mal
let x = 10;

// Bien
let edadUsuario = 25;</code></pre><h4>2. Aplica Principios de Diseño Sólidos</h4><p>Utiliza principios como el principio de responsabilidad única y la separación de preocupaciones para mantener tus funciones y clases enfocadas y cohesivas.</p><pre><code class="language-javascript">// Ejemplo de principio de responsabilidad única
class Usuario {
    constructor(nombre, edad) {
        this.nombre = nombre;
        this.edad = edad;
    }

    getNombre() {
        return this.nombre;
    }

    getEdad() {
        return this.edad;
    }
}</code></pre><h4>3. Escribe Funciones y Métodos Pequeños y Modulares</h4><p>Divide tu lógica en funciones más pequeñas y modulares. Esto mejora la legibilidad y facilita la reutilización del código.</p><pre><code class="language-javascript">// Mal - Función grande y monolítica
function calcularPrecioFinal(precioBase, descuento) {
    let precioDescontado = precioBase * (1 - descuento / 100);
    let impuestos = precioDescontado * 0.15;
    return precioDescontado + impuestos;
}

// Bien - Funciones modulares
function calcularPrecioDescontado(precioBase, descuento) {
    return precioBase * (1 - descuento / 100);
}

function calcularImpuestos(precioDescontado) {
    return precioDescontado * 0.15;
}

function calcularPrecioFinal(precioBase, descuento) {
    let precioDescontado = calcularPrecioDescontado(precioBase, descuento);
    let impuestos = calcularImpuestos(precioDescontado);
    return precioDescontado + impuestos;
}</code></pre><h4>4. Gestiona Eficientemente los Comentarios</h4><p>Los comentarios deben utilizarse para explicar el por qué de tu código, no el qué. Evita comentarios obvios y asegúrate de mantenerlos actualizados.</p><pre><code class="language-javascript">// Mal - Comentario innecesario
let precio = calcularPrecio(); // Calcula el precio

// Bien - Comentario significativo
let precio = calcularPrecio(); // Calcula el precio descontado incluyendo impuestos</code></pre><h4>5. Sigue Convenciones de Codificación</h4><p>Adopta un estilo de codificación consistente, como los estándares de Airbnb o Google JavaScript Style Guide, para mejorar la legibilidad y la colaboración en equipo.</p><pre><code class="language-javascript">// Mal - Estilo inconsistente
function CalcularTotal(precioBase, descuento) {
    return precioBase * (1 - descuento / 100);
}

// Bien - Estilo consistente (estilo camelCase)
function calcularTotal(precioBase, descuento) {
    return precioBase * (1 - descuento / 100);
}</code></pre><h4>6. Realiza Pruebas Unitarias Rigurosas</h4><p>Las pruebas unitarias aseguran que tu código funcione correctamente y te permiten realizar cambios con confianza sin romper funcionalidades existentes.</p><pre><code class="language-javascript">// Ejemplo de prueba unitaria con Jest
function suma(a, b) {
    return a + b;
}

test('suma de 1 + 2 es igual a 3', () =&gt; {
    expect(suma(1, 2)).toBe(3);
});</code></pre><h4>7. Maneja los Errores de Forma Elegante</h4><p>Implementa manejo de errores robusto con bloques try-catch para evitar que los errores no controlados afecten el rendimiento de la aplicación.</p><pre><code class="language-javascript">// Mal - Manejo inadecuado de errores
try {
    // Código que puede lanzar una excepción
    fetch('https://api.example.com/data')
        .then(response =&gt; response.json())
        .then(data =&gt; console.log(data))
} catch (error) {
    console.error('Error al obtener datos:', error)
}

// Bien - Manejo adecuado de errores
try {
    fetch('https://api.example.com/data')
        .then(response =&gt; response.json())
        .then(data =&gt; console.log(data))
        .catch(error =&gt; {
            console.error('Error al obtener datos:', error);
        });
} catch (error) {
    console.error('Error inesperado:', error);
}</code></pre><h4>8. Refactoriza Regularmente el Código</h4><p>Dedica tiempo a mejorar continuamente el diseño y la estructura de tu código para reducir la complejidad y eliminar duplicaciones.</p><pre><code class="language-javascript">// Mal - Código duplicado
function calcularAreaCirculo1(radio) {
    return Math.PI * radio * radio;
}

function calcularAreaCirculo2(radio) {
    return 3.1416 * radio * radio;
}

// Bien - Código refactorizado
function calcularAreaCirculo(radio) {
    return Math.PI * radio * radio;
}</code></pre><h4>9. Documenta de Manera Significativa</h4><p>Documenta tu código de forma clara y concisa, explicando el propósito de las funciones y métodos, así como los parámetros y los valores de retorno.</p><pre><code class="language-javascript">// Mal - Falta de documentación
function calcularAreaRectangulo(base, altura) {
    return base * altura;
}

// Bien - Documentación significativa
/**
 * Calcula el área de un rectángulo dado su base y altura.
 * @param {number} base - La base del rectángulo.
 * @param {number} altura - La altura del rectángulo.
 * @returns {number} El área del rectángulo.
 */
function calcularAreaRectangulo(base, altura) {
    return base * altura;
}</code></pre><h4>10. Optimiza el Rendimiento cuando sea Necesario</h4><p>Identifica y optimiza partes críticas de tu código para mejorar el rendimiento general de la aplicación, utilizando herramientas y técnicas adecuadas.</p><pre><code class="language-javascript">// Ejemplo de optimización de rendimiento
function sumaNumeros(listaNumeros) {
    let resultado = 0;
    for (let i = 0; i &lt; listaNumeros.length; i++) {
        resultado += listaNumeros[i];
    }
    return resultado;
}</code></pre><p>Implementar estas prácticas no solo mejorará la calidad de tu código, sino que también te ayudará a ser un desarrollador más eficiente y efectivo. Recuerda siempre revisar y adaptar estas prácticas según las necesidades y características específicas de tus proyectos y equipos.</p>

10 Prácticas cruciales para escribir código limpio y mantenible

Este cheatsheet organizado abarca una amplia variedad de propiedades y técnicas de CSS, desde selectores básicos hasta animaciones avanzadas y layouts responsivos. Úsalo como referencia rápida y práctica para mejorar tus habilidades en CSS y diseñar sitios web más atractivos y funcionales.

<p>Este cheatsheet organizado abarca una amplia variedad de propiedades y técnicas de CSS, desde selectores básicos hasta animaciones avanzadas y layouts responsivos. Úsalo como referencia rápida y práctica para mejorar tus habilidades en CSS y diseñar sitios web más atractivos y funcionales.</p><h3>Selectores CSS</h3><pre><code class="language-css">/* Selector universal */
* {
    margin: 0;
    padding: 0;
}

/* Selector de clase */
.clase {
    font-size: 16px;
}

/* Selector de ID */
#miId {
    background-color: yellow;
}

/* Selector de atributo */
input[type="text"] {
    border: 1px solid #ccc;
}

/* Selector de pseudo-clase :hover */
a:hover {
    color: #FF0000;
}

/* Selector de pseudo-elemento ::before */
p::before {
    content: "Antes de ";
    font-weight: bold;
}</code></pre><hr><h3>Propiedades de Texto y Fuente</h3><pre><code class="language-css">/* Color de texto */
color: red;

/* Tamaño de fuente */
font-size: 18px;

/* Familia de fuente */
font-family: Arial, sans-serif;

/* Estilo de fuente */
font-style: italic;

/* Peso de fuente */
font-weight: bold;

/* Decoración de texto */
text-decoration: underline;

/* Espacio entre letras */
letter-spacing: 1px;

/* Espacio entre líneas */
line-height: 1.5;</code></pre><hr><h3>Propiedades de Caja (Box Model)</h3><pre><code class="language-css">/* Margen */
margin: 10px;

/* Relleno */
padding: 20px;

/* Borde */
border: 1px solid #000;

/* Ancho */
width: 300px;

/* Alto */
height: 200px;

/* Modelo de caja flexible */
box-sizing: border-box;

/* Radios de borde */
border-radius: 5px;

/* Sombras */
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);</code></pre><hr><h3>Propiedades de Diseño y Visualización</h3><pre><code class="language-css">/* Mostrar u ocultar */
display: block;
display: inline;
display: none;

/* Modelo de caja flexible */
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;

/* Alineación de texto */
text-align: center;

/* Columnas múltiples */
column-count: 3;
column-gap: 20px;

/* Superposición */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);</code></pre><hr><h3>Animaciones y Transiciones</h3><pre><code class="language-css">/* Transición */
transition: width 2s, height 2s, transform 2s;

/* Animación */
@keyframes mover {
    from {left: 0;}
    to {left: 200px;}
}

/* Aplicación de animación */
div {
    animation: mover 4s infinite;
}

/* Animación de rotación */
@keyframes girar {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

/* Aplicación de animación de rotación */
img {
    animation: girar 2s linear infinite;
}</code></pre><hr><h3>Unidades y Medios Responsivos</h3><pre><code class="language-css">/* Unidades relativas */
font-size: 1.2em;
width: 50%;
padding: 10vw;

/* Medios responsivos */
@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}</code></pre><hr><h3>Filtros y Efectos Visuales</h3><pre><code class="language-css">/* Filtros de imagen */
img {
    filter: grayscale(50%);
}

/* Filtros de color */
div {
    background-color: rgba(255, 0, 0, 0.5);
}

/* Transparencia */
opacity: 0.8;

/* Mezcla de fondo */
background-blend-mode: multiply;</code></pre><hr><h3>Flexbox y Grid Layout</h3><pre><code class="language-css">/* Flexbox */
.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* Grid Layout */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 20px;
}</code></pre><p></p>

Cheatsheet completo de CSS: Desde selectores básicos hasta animaciones y diseño responsivo

Dominando CSS Grid y Flexbox para diseños web adaptables y eficientes. Descubre cómo crear interfaces que se ajustan perfectamente a cualquier dispositivo.

<h4>Utilización de CSS Grid para Diseño Responsivo</h4><p>CSS Grid permite crear layouts complejos y adaptables divididos en filas y columnas. A continuación, un ejemplo de cómo definir un grid con dos columnas que se reajusta a una sola columna en pantallas pequeñas:</p><pre><code class="language-css">.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Dos columnas de igual tamaño */
  grid-gap: 20px; /* Espacio entre las columnas */
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr; /* Cambia a una sola columna en pantallas más pequeñas */
  }
}</code></pre><p>En este código:</p><ul><li><p><code>grid-template-columns</code> define dos columnas de tamaño igual (<code>1fr</code>), con un espacio (<code>grid-gap</code>) de 20px entre ellas.</p></li><li><p>Dentro de la media query <code>(max-width: 768px)</code>, se redefine <code>grid-template-columns</code> para que sea una sola columna cuando el ancho de la pantalla sea menor o igual a 768px.</p></li></ul><h4>Flexibilidad con Flexbox Dentro de CSS Grid</h4><p>Flexbox se usa dentro de áreas definidas por CSS Grid para controlar el orden y la alineación de los elementos. A continuación, un ejemplo de cómo organizar tarjetas en una cuadrícula que se ajusta automáticamente y se reorganiza en columnas en pantallas más pequeñas:</p><pre><code class="language-css">.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
}</code></pre><p>En este ejemplo:</p><ul><li><p><code>grid-template-columns</code> utiliza <code>auto-fit</code> y <code>minmax(300px, 1fr)</code> para crear una cuadrícula flexible donde las tarjetas tienen un ancho mínimo de 300px y se expanden para llenar el espacio disponible.</p></li><li><p>Cada <code>.card</code> se configura con <code>display: flex</code> para alinear verticalmente los elementos y <code>justify-content: space-between</code> para distribuir uniformemente los elementos dentro de la tarjeta.</p></li></ul><h4>Media Queries y Breakpoints para Adaptabilidad</h4><p>El uso de media queries permite ajustar dinámicamente el diseño según el tamaño de la pantalla. A continuación, un ejemplo de cómo cambiar el tamaño del texto y los márgenes en diferentes dispositivos:</p><pre><code class="language-css">.text-container {
  font-size: 18px;
  margin: 20px;
}

@media (max-width: 768px) {
  .text-container {
    font-size: 16px;
    margin: 10px;
  }
}</code></pre><p>Aquí:</p><ul><li><p><code>font-size</code> y <code>margin</code> se ajustan en la media query <code>(max-width: 768px)</code> para reducir el tamaño del texto y los márgenes en pantallas más pequeñas, mejorando así la legibilidad y el espacio visual.</p></li></ul><h3>Integración y Aplicación Práctica</h3><p>Estos ejemplos ilustran cómo CSS Grid y Flexbox pueden utilizarse conjuntamente para crear diseños web responsivos y adaptables. Es esencial experimentar con estos conceptos y ajustarlos según las necesidades específicas de diseño y contenido de tu sitio web. Al implementar estas técnicas junto con media queries, puedes garantizar una experiencia de usuario consistente y optimizada en una variedad de dispositivos y tamaños de pantalla.</p><p>Al utilizar estos fragmentos de código en tu blog, ayudarás a tus lectores a comprender mejor cómo aplicar estas técnicas en sus propios proyectos, mejorando su habilidad para crear diseños web modernos y efectivos.</p>

Diseño responsivo avanzado con CSS Grid y Flexbox

Aprenderemos cómo crear un slider infinito utilizando solo HTML y CSS. Este slider nos permitirá mostrar todo tipo de contenido de manera cíclica, proporcionando una experiencia fluida y atractiva para los usuarios.

<p>El dia de hoy vamos a crear un slider infinito de una manera muy sencilla. Solo necesitaremos HTML y CSS.</p><p>1. Primero, vamos a empezar a maquetar nuestro slider. Tendremos un contenedor principal llamado 'slider-container'. Luego, anidaremos un contenedor con una clase llamada 'slider' y, por último, colocaremos los 'slider-items' y dentro todas las slides que necesites o directamente las imágenes. Es muy importante recordar que nuestro slider debe ocupar toda la pantalla o hacer que las imágenes cubran la parte que deseamos. Si tenemos 5 imágenes, lo que vamos a hacer es duplicar esas imágenes y vamos a tener 10. En mi caso, usaré 8 imágenes, por lo que al final tendré 16 imágenes, como se puede apreciar a continuación:</p><pre><code class="language-xml">    
&lt;div class="slider-container"&gt;
   &lt;div class="slider"&gt;
      &lt;div class="slider-items" &gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-google-sva-scholarship-20.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1024px-Netflix_2015_logo.svg.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://logos-world.net/wp-content/uploads/2023/07/Facebook-Logo.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://1000logos.net/wp-content/uploads/2017/04/Microsoft-Logo.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://1000logos.net/wp-content/uploads/2017/03/NASA-Logo-1975.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://miro.medium.com/v2/resize:fit:852/1*1ckgC6nPiidH23AUBxBS_A.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://freelogopng.com/images/all_img/1686390785Tesla-Name-Logo.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Bitcoin_logo.svg/2560px-Bitcoin_logo.svg.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-google-sva-scholarship-20.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1024px-Netflix_2015_logo.svg.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://logos-world.net/wp-content/uploads/2023/07/Facebook-Logo.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://1000logos.net/wp-content/uploads/2017/04/Microsoft-Logo.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://1000logos.net/wp-content/uploads/2017/03/NASA-Logo-1975.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://miro.medium.com/v2/resize:fit:852/1*1ckgC6nPiidH23AUBxBS_A.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://freelogopng.com/images/all_img/1686390785Tesla-Name-Logo.png"
               alt="" /&gt;
         &lt;/div&gt;
         &lt;div class="slide"&gt;
            &lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Bitcoin_logo.svg/2560px-Bitcoin_logo.svg.png"
               alt="" /&gt;
         &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
&lt;/div&gt;</code></pre><p>2. Luego, los estilos deben ser similares a los que se muestran a continuación. Recuerda que es importante tener un ancho fijo para los slides (en este caso 350px) y recordar el número de slides (16 en esta ocasión) y la mitad de slides (8 imágenes). Con esta información, haremos los cálculos y la ilusión de slider infinito:</p><pre><code class="language-css">.slider {
    margin: 0 auto;
    position: relative;
    width: 100vw;
     height: 150px;
    display: grid;
    place-items: center;
     overflow:hidden;
}
/* REMEMBER: 350px is the width of slide if you change this, do it everywhere this size it's similar. * 16 is the number of items */
.slider-items {
    display: flex;
     align-items: center;
    gap: 0px;
    width: calc(350px * 16);
     height: 100%;
    animation: scrolling 40s linear infinite;
}
 .slide {
    width: 350px;
    display: flex;
    align-items: center;
    position: relative;
}
 .slide img {
    width: 220px;
    height: auto;
}
/** * 350px is the width of slide and 8 is the half of items and it's negative * for left to right animation */
@keyframes scrolling {
    0% {
         transform: translateX(0);
    }
     100% {
         transform: translateX(calc(350px * -8));
    }
}
 </code></pre><p>3. El resultado sería similar a lo siguiente:</p><div class="iframe-module_lidiaEditorIframe__UCqeS"><iframe src="https://codepen.io/CodeChappie/embed/oNOMNWZ?default-tab=html%2Cresult" title="Infinite Carousel" frameborder="0" allowfullscreen="true"></iframe></div>

Slide infinito con solo HTML y CSS

Control de versiones, depuración, diseño, pruebas y seguridad. ¡Mejora tus habilidades en programación!

<p>Como desarrollador, es importante tener una base s&oacute;lida de conocimientos para enfrentar los desaf&iacute;os que surgen en el mundo de la programaci&oacute;n. En este art&iacute;culo, exploraremos cinco conceptos b&aacute;sicos que todo desarrollador debe conocer. Estos conceptos abarcan desde el control de versiones y la depuraci&oacute;n hasta los patrones de dise&ntilde;o, las pruebas unitarias y la seguridad. Conocer y comprender estos fundamentos te ayudar&aacute; a construir una base s&oacute;lida para tu carrera como desarrollador.</p>
<ol>
<li>
<p>Control de versiones: El control de versiones es fundamental en el desarrollo de software. Permite gestionar y rastrear los cambios realizados en el c&oacute;digo fuente a lo largo del tiempo. Utilizando herramientas como Git, puedes crear ramas, fusionar cambios y revertir modificaciones. Esto facilita el trabajo en equipo y la colaboraci&oacute;n, adem&aacute;s de brindar un historial completo de los cambios realizados.</p>
</li>
<li>
<p>Depuraci&oacute;n: La depuraci&oacute;n es el proceso de identificar y corregir errores o bugs en el c&oacute;digo. Los desarrolladores utilizan herramientas de depuraci&oacute;n para examinar el flujo de ejecuci&oacute;n, inspeccionar variables y realizar un seguimiento paso a paso del c&oacute;digo. La depuraci&oacute;n es esencial para solucionar problemas y garantizar el correcto funcionamiento de una aplicaci&oacute;n.</p>
</li>
<li>
<p>Patrones de dise&ntilde;o: Los patrones de dise&ntilde;o son soluciones probadas y com&uacute;nmente utilizadas para problemas recurrentes en el desarrollo de software. Estos patrones proporcionan estructuras y abstracciones que facilitan la creaci&oacute;n de aplicaciones flexibles, mantenibles y escalables. Algunos ejemplos de patrones de dise&ntilde;o populares incluyen el patr&oacute;n de dise&ntilde;o Singleton, el patr&oacute;n de dise&ntilde;o Observer y el patr&oacute;n de dise&ntilde;o Factory.</p>
</li>
<li>
<p>Pruebas unitarias: Las pruebas unitarias son peque&ntilde;as pruebas automatizadas que verifican el comportamiento y la funcionalidad de unidades individuales de c&oacute;digo, como funciones o m&eacute;todos. Estas pruebas se realizan de forma aislada para asegurarse de que cada unidad funcione correctamente. Las pruebas unitarias ayudan a identificar errores tempranos, mejorar la calidad del c&oacute;digo y facilitar el mantenimiento a largo plazo.</p>
</li>
<li>
<p>Seguridad: La seguridad es un aspecto cr&iacute;tico en el desarrollo de software. Los desarrolladores deben estar familiarizados con las mejores pr&aacute;cticas de seguridad y seguir pautas para proteger los datos y sistemas. Esto implica el uso de t&eacute;cnicas de cifrado, validaci&oacute;n de entradas, protecci&oacute;n contra ataques de inyecci&oacute;n de c&oacute;digo, gesti&oacute;n adecuada de contrase&ntilde;as y otras medidas de seguridad.</p>
</li>
</ol>
<p>Estos cinco conceptos b&aacute;sicos son fundamentales para todo desarrollador. Conocerlos te ayudar&aacute; a desarrollar software de calidad, mantener un flujo de trabajo eficiente y seguir buenas pr&aacute;cticas en el desarrollo de aplicaciones. Continuar aprendiendo y explorando conceptos m&aacute;s avanzados te permitir&aacute; seguir creciendo como desarrollador y enfrentar desaf&iacute;os m&aacute;s complejos en el futuro.</p>
<p>Espero que este art&iacute;culo te haya proporcionado una visi&oacute;n general de cinco conceptos b&aacute;sicos esenciales para todo desarrollador. Dominar estos conceptos te permitir&aacute; enfrentar desaf&iacute;os de programaci&oacute;n con mayor confianza y eficacia. Recuerda que la programaci&oacute;n es un campo en constante evoluci&oacute;n, por lo que es importante continuar aprendiendo y explorando nuevos conceptos y tecnolog&iacute;as. &iexcl;Dese&aacute;ndote &eacute;xito en tu viaje como desarrollador!</p>

Contenido

¿Qué es Promise.all?

@codechappie

Descubre el secreto del buen diseño: Observa cómo piensan tus usuarios

@codechappie

10 Prácticas cruciales para escribir código limpio y mantenible

@codechappie

Cheatsheet completo de CSS: Desde selectores básicos hasta animaciones y diseño responsivo

@codechappie

Diseño responsivo avanzado con CSS Grid y Flexbox

@codechappie

Slide infinito con solo HTML y CSS

@codechappie