Como crear componentes React con ESM y CJS

Crear bibliotecas para publicar, es más complicado que reutilizar código entre tus proyectos sin que sea una biblioteca publicada, pero es necesario si quieres ayudar a la comunidad y a tu equipo a futuro. Y todos alguna vez tenemos que publicar un componente, es como un bautizo de sangre.
Checa este artículo.

¿Por qué decidimos usar AWS en lugar de Vercel para hospedar un proyecto Next.js?

No todos los que usan Next.js hostean en Vercel, de hecho, para nuestros proyectos nosotros usamos tanto AWS como Vercel. El equipo de Graphite, decidió compartir sus razones de por qué no utilizan Vercel en el siguiente articulo.

HERRAMIENTA 🛠️ 
Mozilla Observatory

En el mundo del frontend, no todo es colores y tipografías y animaciones bonitas, a veces también tienes que hacer chamba delicada como averiguar que tan inseguro es tu sitio y ver qué acciones necesitas hacer para mitigar, solucionar o delegar. No dejes para mañana lo que puedes comenzar a preocuparte y no dejarte dormir hoy.
Link aquí.

Authkit

Otra herramienta de AuthKit que compartimos. Y es que, hacer Auth es difícil, y siempre que puedas, y el presupuesto y calendario lo permita, debes elegir la mejor opción para tu proyecto.

Tamagui React Native + Web UI Kit

Este UI Kit está tan hermoso 😍 que sin duda queríamos compartirlo contigo. Lo mejor es que también esta disponible para React Native. E incluso tiene una versión premium, por si necesitas algo más completo.

TEMPLATE 🖥️ 
11st-starter-kit

Otro boilerplate de eleventy que te recomendamos, y este utiliza Vite, TailwindCSS y Alpine.js para que lo clones y te pongas a programar sin tanto que pensar.

EL RINCÓN DE CSS 👨‍💻 

Aquí te va un pequeño tip de como solucionar un comportamiento raro que alguna vez te puede tocar ver en algún proyecto. De nada. 😉 

NOTICIA 📰 
Presentando StyleX

Meta, esta de manteles largos, porque acaban de presentar su biblioteca CSS-in-JS al mundo entero, y si pensabas que necesitabas otra para experimentar y probar, pues para que lo hagas.

UN DÍA COMO HOY 🗓️ 

El 09 de diciembre de 1968, Douglas C. Engelbart y un grupo de 17 investigadores que trabajan con él en el Instituto de Investigación de Stanford, en Menlo Park, realizan la primera demostración pública del mouse 🐁
Fue una presentación en linea, realizada en vivo la cual dura aproximadamente 90 minutos.

El 09 de diciembre de 1906, nace en Nueva York, Estados Unidos, Grace Murray Hopper, científica informática y contralmirante de la Marina de los Estados. 🫡 Hopper fue pionera en el campo de la informática, fue uno de los primeros programadores del computador Harvard Mark I e inventó el primer compilador para un lenguaje de programación.

El 09 de diciembre de 1987, Microsoft lanza su interfaz gráfica de usuario (GUI) de 16 bits Windows 2.0. A menos de un año del lanzamiento de Windows 2.0, Microsoft lanza Windows/286 (2.10) y Windows/386 (2.10) el 27 de Mayo de 1988. Estas versiones pueden aprovechar las características específicas de los procesadores Intel 80286 e Intel 80386.

VACANTE 💼 
Senior Frontend Engineer

Ubicación: México (Remoto)
Empresa: Seva Development
Responsabilidades: Diseñar y desarrollar interfaces de usuario de alta calidad, responsivas y escalables para los productos y servicios del cliente. Colaborar con gerentes de producto, diseñadores de UX e ingenieros de backend para crear soluciones fluidas, visualmente atractivas y centradas en el usuario que superen los límites del desarrollo web moderno. Optimizar el código front-end existente para lograr rendimiento, confiabilidad y mantenibilidad, utilizando técnicas avanzadas y mejores prácticas, entre otras.

¿Te interesa? Conoce más, aquí. 🤞 

CHALLENGE ⚔️ 

Implementación de un Observable Personalizado

Los Observables son una parte fundamental de la programación reactiva, permitiendo manejar flujos de datos asíncronos y eventos. Tu tarea es implementar una clase Observable que permita a los suscriptores escuchar y reaccionar a eventos o cambios de datos.

Descripción del Reto:

• La clase Observable debe permitir que las funciones se suscriban a eventos.

• Debe proporcionar un método para emitir eventos, notificando a todos los suscriptores.

• También debe permitir la desuscripción de eventos.

Ejemplo de Uso:

const observable = new Observable();

const suscriptor = (data) => console.log(`Dato recibido: ${data}`);
observable.subscribe(suscriptor);

observable.emit("¡Hola mundo!");
// El suscriptor debería loguear: "Dato recibido: ¡Hola mundo!"

observable.unsubscribe(suscriptor);
observable.emit("Este evento no se logueará");
// El suscriptor ya no está escuchando, así que no debería haber log

Ver resultado 👀

RESULTADO 🧐 

class Observable {
    constructor() {
        this.subscribers = [];
    }

    // Suscribir una función al Observable
    subscribe(fn) {
        this.subscribers.push(fn);
        return () => this.unsubscribe(fn); // Devuelve una función para desuscribirse
    }

    // Desuscribir una función del Observable
    unsubscribe(fn) {
        this.subscribers = this.subscribers.filter(subscriber => subscriber !== fn);
    }

    // Emitir un evento a todos los suscriptores
    emit(data) {
        this.subscribers.forEach(subscriber => subscriber(data));
    }
}

// Ejemplo de uso
const observable = new Observable();

const suscriptor = (data) => console.log(`Dato recibido: ${data}`);
const desuscribir = observable.subscribe(suscriptor);

observable.emit("¡Hola mundo!");
// El suscriptor debería loguear: "Dato recibido: ¡Hola mundo!"

desuscribir();
observable.emit("Este evento no se logueará");
// No debería haber log, ya que el suscriptor fue desuscrito

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 👀