Las personas que arruinaron Internet

Dice el refrán, “no culpes al jugador, sino al juego.” ¿Los expertos en SEO arruinaron internet? 🤔 Tanto si estas de acuerdo o no, este articulo es una buena lectura para entender el contexto y el futuro del SEO, las búsquedas en Internet y lo que sigue.

Detrás de las escenas de diseñar un Design System component

Frontendero, ¿recuerdas los tiempos en los que, si tenias que crear un componente, lo hacías en 5 minutos, lo desplegabas a producción, y luego descubrías que no funcionaba porque no habías seguido una correcta metodología, investigación e implementación? Pues esos tiempos se acabaron, ahora antes de lanzar, es momento de pensar y de diseñar.

HERRAMIENTA
Moveable

Tarde o temprano, tendrás que realizar un proyecto en el que tengas que mover elementos en pantalla para ordenarlos o ajustarlos. No te preocupes, ¡aquí tenemos la herramienta para ti!

TEMPLATE
Next.js Commerce

Template para que construyas tu siguiente proyecto e-commerce con Next.js y MedusaJS.

GUÍA
Como usar TypeScript con React

Quizás piensas que ya sabes usar bien TypeScript con React, en cuyo caso puedes no leer este articulo. Pero quizás piensas que no lo sabes usar o que aún puedes aprender más al respecto, en cuyo caso, te felicito, eres un frontendero y nunca paras de aprender. 😉 

NOTICIA
Prisma 5.6.0

Nuevas mejoras para los drivers y un comando prisma debug para poder cachar mejor esos bugs. Además de otras mejoras que tienes que probar.

INSPIRACIÓN
Colección de los mejores sitios de animación

Entra, inspÍrate, disfruta, practica, aprende y replica.

VACANTE
Frontend Engineer (4800 USD/Mes) [Remote]

Si tienes experiencia con Node JS; React JS, TypeScript, Postgres, un conocimiento profundo del desarrollo de lado del clientes, codificación en HTML5 CSS3 JavaScript ES6 y jQuery, entre algunas otras cualidades, Listopro tiene una oferta que te puede interesar!

CHALLENGE
Imagina que estás desarrollando una aplicación web que requiere un cronómetro para rastrear y mostrar la cantidad de tiempo dedicado a una tarea específica. El cronómetro debe ser controlable por el usuario y mostrar la cuenta de tiempo en segundos.

• Escribe una función createStopwatch que renderice un cronómetro en el DOM.

• El cronómetro debe tener botones para iniciar, detener y reiniciar la cuenta de tiempo.

• La visualización del tiempo debe actualizarse en el DOM cada segundo.

• Asegúrate de que los controles del cronómetro funcionen de manera coherente (por ejemplo, no se debe poder iniciar el cronómetro si ya está corriendo).

Ejemplo de Estructura HTML:

<div id="stopwatch">
    <span id="timer">0</span>
    <button id="start">Iniciar</button>
    <button id="stop">Detener</button>
    <button id="reset">Reiniciar</button>
</div>

Ver resultado 👀

RESULTADO

function createStopwatch() {
    let time = 0;
    let intervalId = null;
    const timerDisplay = document.getElementById('timer');
    const startButton = document.getElementById('start');
    const stopButton = document.getElementById('stop');
    const resetButton = document.getElementById('reset');

    startButton.addEventListener('click', function() {
        if (!intervalId) {
            intervalId = setInterval(() => {
                time++;
                timerDisplay.textContent = time;
            }, 1000);
        }
    });

    stopButton.addEventListener('click', function() {
        if (intervalId) {
            clearInterval(intervalId);
            intervalId = null;
        }
    });

    resetButton.addEventListener('click', function() {
        time = 0;
        timerDisplay.textContent = time;
        if (intervalId) {
            clearInterval(intervalId);
            intervalId = null;
        }
    });
}