Reporte el estado del diseñador 2023 por Figma

Ya salió el reporte del state of the Designer del 2023 organizado por Figma y trae muchas cosas interesantes sobre el trabajo remoto, si los diseñadores son felices y sobre todo la importancia del diseño en los productos.

Web animaciones para React: Framer Motion vs GSAP

¿Escuchaste el episodio del Podcast donde hablamos de Animación? Ahí hablamos sobre Framer Motion y sus bondades. Y, en este artículo, se hace una comparación entre Framer Motion y GSAP, que es una biblioteca mas universal de animación para que elijas tu favorita.

Volviendo a React

Uno siempre vuelve al lugar donde fue… 🤔 Uno siempre vuelve al lugar donde se sintió más cómodo.🙃 A veces uno decide experimentar con “N” tecnología por ciertas razones pero termina volviendo a la más completa para sacar el trabajo, como en este caso, daily.dev que, después de haber estado usando Preact, regreso a React.

HERRAMIENTA
Material Design Bootstrap

Material Design es una buena biblioteca de design system, y se puede integrar muy bien con herramientas como Bootstrap 5 y React. Este día, te traemos un design UI Kit gratuito para esos proyectos que tienes pendientes, porque te falta un buen diseño.

EL RINCÓN DE CSS
Width y Height

Un pequeño articulo para que tú también puedas explicar cómo funciona Width y Height en CSS.

GUÍA
Una guía interactiva a CSS Grid

Esta es una de las mejores guías para aprender CSS que hemos visto en mucho tiempo. Ahora si no tendrás excusa para no usar CSS Grid en todos tus proyectos.

NOTICIA
Astro 3.5

Parece que fue hace unos meses cuando salió la versión 3.0 de Astro y ya vamos con 5 versiones menores desde entonces. Mejoras al componente de i18n, prefetch, optimization de imágenes, ViewTransitions para formularios y más vienen en esta versión.

VACANTE
Frontend Engineer

En Clara, están en busca de un desarrollador Frontend con más de 4 años de experiencia desarrollando experiencia en React/Redux en proyectos comerciales, conocimiento de Redux Saga, React Hooks, API de contexto y API de AWS Amplify, fuertes habilidades de JavaScript, entre otras cualidades. Checa aquí los requisitos y postúlate.

CHALLENGE
Imagina que estás trabajando en una aplicación educativa y necesitas una función que pueda crear tablas de multiplicar dinámicamente para los usuarios. El usuario debería poder especificar el tamaño de la tabla, y tu función debe renderizarla en la página.

• Escribe una función createMultiplicationTable que tome un número n como argumento.

• Esta función debe crear y adjuntar una tabla de multiplicar de n x n al DOM.

• Cada celda de la tabla debe contener el producto de sus índices de fila y columna (empezando desde 1).

Ejemplo: Si el usuario ingresa 3, tu función debe generar la siguiente tabla:

Ver respuesta 👀

RESULTADO

// CSS
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            padding: 5px;
            text-align: center;
        }
        th {
            background-color: #f0f0f0;
        }
    </style>


// HTML
<div id="multiplication-table"></div>

// JS
function createMultiplicationTable(n) {
    const table = document.createElement('table');
    
    // Crear una función para agregar celdas para reducir la repetición de código
    const addCell = (row, content, isHeader = false) => {
        let cell = row.insertCell();
        cell.innerHTML = content;
        if (isHeader) {
            cell.outerHTML = `<th>${content}</th>`;
        }
    };

    // Crear el encabezado de la tabla
    let header = table.insertRow();
    addCell(header, ''); // Celda vacía para la esquina superior izquierda
    for (let i = 1; i <= n; i++) {
        addCell(header, i, true);
    }

    // Crear las filas y columnas de la tabla
    for (let row = 1; row <= n; row++) {
        let tableRow = table.insertRow();
        addCell(tableRow, row, true); // Encabezado de fila
        for (let col = 1; col <= n; col++) {
            addCell(tableRow, row * col);
        }
    }

    // Adjuntar la tabla al DOM
    document.getElementById('multiplication-table').appendChild(table);
}

Tienes otra respuesta? Escríbenos