#170 Haciendo Open Source el sitio web de Remix

Haciendo Open Source el sitio web de Remix

Qué mejor testimonio de que un framework para construir sitios web funciona y permite hacer muchas cosas que hacen Open Source su sitio web. Y eso es lo que Remix hizo. Este proyecto es una excelente ventana para aprender de Remix y de cómo operan los sitios web en producción. Aunque Remix no es el único framework JavaScript que lo hace, ya que muchos otros también tienen su sitio en repositorio público.

Dándole forma al futuro del diseño

El futuro del diseño interactivo, siempre ha estado en evolución, y en estos momentos se enfrenta a dos grandes cambios de paradigmas: la computación espacial del Apple Vision, y los cambios en AR/VR que esto genere y las herramientas de Inteligencia Artificial generativa. Y la pregunta que todos nos debemos hacer, ¿cuál es el siguiente paso en la evolución de nuestra carrera profesional?

Cómo incrementamos el tráfico de búsqueda 20 veces en 4 meses

Si eres de México y te gusta el futbol y ves programas futbolísticos, sabras que hay una frase que se llama “por las que mueres” que son jugadas futbolísticas espectaculares. En el mundo del frontend también deberíamos tener una frase así para cuando hablamos de optimizaciones, depuraciones o hitos especiales, como este post de Hardcover, donde hablan sobre como optimizaron y lograron mejores visitas haciendo cambios en el router de Next.js.

HERRAMIENTA 🛠️ 
Tabulator

Este data-grid tiene muchas opciones interesantes, empezando porque es una biblioteca JavaScript compatible con Angular, React, Svelte y Vue. Tiene muchísimas funciones, tanto de organización, como de filtrado y muchas formas de personalizar, y la documentación esta muy fácil de entender y tiene muchos ejemplos.

Marked

Hay muchas herramientas para hacer parsing de markdown, y en lo que se destaca Marked, es que es rápido, tiene soporte para muchas especificaciones de Markdown, y tiene opción para trabajar con linea de comando. Aunque si lo usas, toma en cuenta que por diseño, Marked no sanitiza la salida de HTML, entonces, por seguridad usa alguna de las bibliotecas que te recomiendan.

EL RINCÓN DEL DISEÑADOR 🎨 
Como crear los iconos perfectos

¿Alguna vez, mientras trabajabas y ponías iconos, te pusiste a pensar que quizás te equivocaste de profesión y lo tuyo es crear iconos? Si esto es algo que te causa ruido, deberías leer el siguiente articulo y quizás podrías considerar una carrera en ello. Pero no renuncies a tu trabajo, se puede ser frontendero y diseñador de iconos a la par. 🧑🏻‍🎨

NOTICIA 📰 
Hono

Hono, el autollamado framework web basado en estándares, acaba de anunciar su versión 4.0 con tres características principales: Static Site generation, Client components y File-based Routing, lo que lo vuelve un framework full-stack.

UN DÍA COMO HOY 🗓️ 

El 28 de febrero de 1989, el Tecnológico de Monterrey campus Monterrey (ITESM) se convirtió en la primera institución en México que consiguió establecer un enlace dedicado a la red NSFNET bajo el dominio .mx: dns.mty.itesm.mx y con la dirección 131.178.1.1.

Así México, por medio del ITESM se convierte en el país con la primera experiencia de Internet en América Latina.

Una máquina Microvax-II, digital fue utilizada como primer servidor de nombres para el dominio .mx. El acceso dedicado a la red de la NSFNET fue establecido a través de la Escuela de Medicina de la Universidad de Texas, en San Antonio, Estados Unidos, donde se ubica el nodo más cercano a la ciudad de Monterrey.

Por esa razón el Tecnológico de Monterrey, campus Monterrey precisamente dispone del primer nombre de dominio “.mx” y fue la primera institución que tuvo la responsabilidad de otorgar nombres de dominio (NameServer) en México (mx).

VACANTE 💼 
Desarrollador/a Frontend

Ubicación: Salamanca, Guanajuato, México (Posibilidad de remoto)
Empresa: The Wise Seeker
Requisitos: HTML5 CSS3/CSS inline. Maquetación responsive en e mails y sitios web. Conocimiento de las limitaciones HTML y CSS en los diferentes clientes de correo. Manejar estos lenguajes que admite HubSpot: Operations Hub: Phyton, JavaScript (Node.js), Java, C# CMS Hub: HTML, CSS, JavaScript, HubL (lenguaje específico de HubSpot para desarrollar plantillas y módulos). Nivel alto de inglés (C1)
Beneficios: Incorporación inmediata e indefinida. Crecimiento y desarrollo profesional. Interesante paquete retributivo. Flexibilidad horaria y modalidad remoto/presencial apoyando la conciliación familiar y profesional de nuestro equipo.

Aquí te dejamos el link para conocer más de esta vacante. 🤞 

RESULTADO DEL CHALLENGE DE AYER 🧐 
¡Gracias a los que contestaron el challenge de ayer! Aquí te dejamos nuestra respuesta:

Implementar una biblioteca básica para manejar observables es un excelente ejercicio para entender los fundamentos de la programación reactiva. Aquí tienes una implementación simple de la clase Observable que cubre la creación, suscripción, emisión de valores y cancelación de suscripciones:

class Observable {
    constructor(subscribe) {
        this.subscribe = subscribe;
    }
}

class Subscriber {
    constructor(observer) {
        this.observer = observer;
        this.isUnsubscribed = false;
    }

    next(value) {
        if (!this.isUnsubscribed && this.observer.next) {
            this.observer.next(value);
        }
    }

    complete() {
        if (!this.isUnsubscribed && this.observer.complete) {
            this.observer.complete();
            this.unsubscribe();
        }
    }

    unsubscribe() {
        this.isUnsubscribed = true;
    }
}

// Uso de la clase Observable
const observable = new Observable((subscriber) => {
    const mySubscriber = new Subscriber(subscriber);
    mySubscriber.next(1);
    mySubscriber.next(2);
    setTimeout(() => mySubscriber.next(3), 1000);
    setTimeout(() => mySubscriber.complete(), 1500);

    return () => mySubscriber.unsubscribe();
});

const subscription = observable.subscribe({
    next: value => console.log(value),
    complete: () => console.log('Completado')
});

// Para demostrar la cancelación de la suscripción
setTimeout(() => {
    subscription(); // Llamar a la función de desuscripción
    console.log('Suscripción cancelada');
}, 500);

Explicación del Código:

• La class Observable recibe una función subscribe en su constructor, la cual es responsable de emitir los valores a sus suscriptores.

• Subscriber es una clase que gestiona la lógica de notificación a los observadores. Maneja la emisión de valores a través de su método next y señala la finalización de la secuencia de valores con el método complete. El método unsubscribe permite cancelar la suscripción.

• Al crear una instancia de Observable, se pasa una función que define cómo y cuándo se emitirán los valores. Esta función también puede devolver otra función que se ejecuta al cancelar la suscripción, lo que permite realizar cualquier limpieza necesaria.

• Al suscribirse al observable, se recibe una función que permite cancelar la suscripción.

• En el ejemplo de uso, el observable emite tres valores (1, 2 después de 1 segundo el valor 3) y luego completa la secuencia. La suscripción se cancela manualmente después de 500 milisegundos para demostrar cómo funciona la cancelación de la suscripción.

Este enfoque ofrece una base sobre la cual se pueden construir funcionalidades más complejas y manejar casos de uso más avanzados en la programación reactiva.

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 👀