#188 CSS Hooks

CSS Hooks

En tiempos donde cada día sale un nuevo Design System Toolkit o un nuevo CSS Toolkit, hay cada vez más bibliotecas para CSS atómico y también hay más bibliotecas CSS-in-JS, parece que hay suficientes opciones para elegir pero hay una que casi nadie comenta y esa es css-hooks, cuyo principal atractivo es la forma en la que se adapta y trabaja bien con custom properties o variables CSS. Si crees que a veces CSS-in-JS te queda a deber, tienes que checar esta opción.

Sobre ser pagado por hacer Open Source

En el número pasado te compartimos una guía sobre como comenzar a contribuir al Open Source, y ahora te compartimos un artículo sobre la experiencia de un desarrollador que desde el 2015 ha estado contribuyendo y cómo esto ha ayudado en su carrera y de que formas ha recibido retribución.

12 años en Meta

En tiempos donde muchos programadores no están más de 2 o 3 años en sus trabajos porque se mueven a otras empresas o porque los despiden, sorprende escuchar que todavía haya gente con más de una década en una sola compañía y por eso que este tipo de posts sobre su trayectoria sean bien recibidos.

Mejorando el desempeño de una App de Shopify

Si estas trabajando en una compañía pequeña, o en un proyecto pequeño con pocos usuarios, quizás muchas técnicas de optimización suenen muy complicadas o que no tienen cabida en lo que haces, pero aun así es importante aprender de buenas prácticas para cuando te toque implementarlas en un futuro proyecto.

GUÍA 📖 
La guía completa para hacer onboarding de clients para que sean usuarios felices y se queden contigo

Si eres frontendero, esto te interesa. No importa que tipo de producto estes construyendo, si tienes usuarios puedes aprender y aplicar mucho de estas recomendaciones para que tus usuarios se queden contigo desde el primer momento.

EL RINCÓN DE CSS 👨‍💻 
Aprende estas unidades CSS relativas al Viewport

¿Sabías que hay nuevas unidades CSS relativas al Viewport adicionales a vh y vw? Si no sabías, ahora lo sabrás después de leer este artículo al respecto.

VIDEO 📹️ 
Mi charla en desempeño del runtime de CSS

Cuando trabajas con cientos de archivos y miles de lineas de CSS, es cuando comienzas a preguntarte si hay una forma de optimizarlo. Y qué mejor que sabiendo exactamente como funcionan los motores de CSS en los diferentes navegadores para saber cuales son las mejores técnicas que puedes usar. Si eres un frontendero que no le tiene miedo al CSS, tienes que ver esta charla sí o sí.

TEMPLATES 🖥️ 
Vuestic Admin

¿Necesitas un template de dashboard para Vue 3, pensado para diferentes opciones como gráficos, i18n, accesibilidad y que además sea gratuito? No te preocupes, te tenemos una recomendación.

HERRAMIENTA 🛠️ 
NuxtHub

Los meta-frameworks de JavaScript siguen adaptándose para tener el mayor número de características que puedan ofrecer. Y esta vez es Nuxt quien introduce una nueva capa de herramientas para hacer más completo su framework: NuxtHub. Con este, vas a poder trabajar con base de datos, almacenamiento de archivos grandes y más.

LANZAMIENTO 🚀 
PixiJS v8

PixiJS, es un motor para creación de contenido digital con el que puedes hacer videojuegos, programación creativa, animaciones y más. Acaban de anunciar la versión 8 que trae soporte mejorado para WebGL, además de que se comenzó a reescribir en TypeScript y muchas mejoras en desempeño frente a sus predecesores.

UN DÍA COMO HOY 🗓️ 

El 17 de marzo de 2009, Google lanza el blog de Google Chrome, poco más de 6 meses después del lanzamiento del navegador web.

En su primer post, Google informa que se han realizado 29 actualizaciones, “cada uno trabajando para mejorar la velocidad de Google Chrome, la estabilidad y facilidad de uso”.

Google informa en su blog que por ese medio publicarán las nuevas funciones, anuncios y actualizaciones y harán mención en otros puntos en los cuales estén trabajando.

El primer post finaliza:  “Este blog está destinado para ti, así que si en algún momento usted tiene algún comentario o sugerencia, por favor, háganoslo saber para que podamos hacer mejoras”.

El post fue publicado por Jason Toff, del equipo de Google Chrome

VACANTE 💼 
Frontend Developer

Ubicación: México (Remoto)
Empresa: VASS LATAM
Requisitos: 3 años de experiencia usando React. HTML5, CSS3. Javascript. Exp desarrollando cualquier framework. Experiencia en integración y consumo de APIs. Analizar problemas y proponer soluciones adecuadas en el contexto del negocio. Nociones de UX / UI
Beneficios:
🏖️ Vacaciones de acuerdo a la LFT
🛫 Movilidad Internacional
👩🏻‍Seguro de Gastos Médicos Mayores
👩🏻‍🏫 Acceso a webinars abiertos y Udemy.
💲 Adelantos de nómina, acceso en el momento que tu decidas.
🏋🏻‍ TotalPass - Descuentos en una red de +2600 gimnasios a un precio especial y en todo México. Aplica para ti y 5 familiares o amigos. (Desde $150 mensuales)
💳Membresía TDU - Descuentos en más de 10,000 establecimientos a nivel nacional.
📚 Clases de inglés y certificaciones técnicas

¿Te interesa esta vacante? Entra al siguiente link. 🤞 

RESULTADO DEL CHALLENGE ANTERIOR 🧐 
¡Gracias a los que contestaron el challenge anterior! Aquí te dejamos nuestra respuesta:

Para implementar una función de debounce en JavaScript que limite la tasa a la que una función dada puede ejecutarse, puedes seguir el siguiente patrón. Esta implementación utiliza setTimeout para agregar un retardo antes de la ejecución de la función y clearTimeout para reiniciar este retardo si la función se vuelve a invocar antes de que el tiempo haya transcurrido:

function debounce(func, delay) {
    let timerId;

    return function(...args) {
        // Si existe un temporizador previo, lo cancela
        if (timerId) {
            clearTimeout(timerId);
        }

        // Crea un nuevo temporizador para retrasar la ejecución de func
        timerId = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

// Función de ejemplo a debouncificar
function guardarInput(usuarioInput) {
    console.log('Guardando datos:', usuarioInput);
}

// Crear una versión debounced de guardarInput
const guardarInputDebounced = debounce(guardarInput, 1000);

// Simular entradas del usuario
guardarInputDebounced('a');
guardarInputDebounced('ab');
guardarInputDebounced('abc'); // Solo este llamado debería invocar guardarInput, después de 1 segundo

• La función debounce recibe dos parámetros: func, que es la función a debouncificar, y delay, que es el tiempo de espera en milisegundos antes de que func pueda ejecutarse nuevamente.

• Dentro de debounce, se declara una variable timerId que mantendrá la referencia al temporizador de setTimeout.

• La función debounce retorna una nueva función que encapsula la lógica para decidir cuándo ejecutar func. Esta función usa el operador de propagación ...args para capturar y pasar todos los argumentos recibidos a func.

• Cada vez que se invoca esta función retornada, primero verifica si ya existe un temporizador (indicando una invocación previa que aún no se ha ejecutado). Si es así, lo cancela usando clearTimeout.

• Luego, establece un nuevo temporizador con setTimeout, que esperará el tiempo especificado en delay antes de ejecutar func. Usamos apply para llamar a func con el contexto adecuado (this) y los argumentos recibidos (args).

• En el ejemplo de uso, guardarInputDebounced es una versión "debounced" de la función guardarInput, lo que significa que múltiples llamadas rápidas a guardarInputDebounced resultarán en una sola llamada a guardarInput después de que el usuario haya dejado de hacer llamadas durante 1 segundo.

CHALLENGE DE HOY ⚔️ 
Implementa la Función map Personalizada

El método map es una parte esencial de la programación funcional en JavaScript, permitiendo aplicar una función a cada elemento de un array y recopilar los resultados en un nuevo array. Tu tarea es desarrollar una función mapPersonalizado que replique esta funcionalidad.

Tareas a realizar:

1. Implementa una función mapPersonalizado que acepte dos argumentos: un array y una función de callback.

2. La función de callback recibe como argumento cada elemento del array, y lo que retorne la función de callback se debe agregar a un nuevo array.

3. mapPersonalizado debe retornar el nuevo array con los elementos transformados.

4. No utilices el método map nativo de los arrays en tu implementación.

Ejemplo de uso:

const numeros = [1, 2, 3, 4];
const duplicar = numero => numero * 2;

console.log(mapPersonalizado(numeros, duplicar)); // Debería retornar [2, 4, 6, 8]

• Puedes utilizar un bucle for o forEach para iterar sobre todos los elementos del array.

• Aplica la función de callback a cada elemento del array original y guarda el resultado en un nuevo array.

Comparte tu respuesta en redes sociales y etiquétanos (@frontenderos), compartiremos nuestra respuesta en el issue de mañana. 😎 

Tu feedback nos ayuda a mejorar

Por favor elige una opción y dinos lo que te gustó y lo que no. Leemos todas las respuestas 👀