#169 Node.js tiene nueva mascota y su nombre es Rocket Turtle 🐢

Node.js tiene nueva mascota y su nombre es Rocket Turtle 🐢 

Node.js tiene una nueva mascota y su nombre es Rocket Turtle, aquí esta la presentación de la mascota. Aunque el diseño esta bonito, todo mundo se esta preguntando ¿por qué una tortuga? 🐢 

No deshabilites los controles de los formularios

Hay debate sobre qué elementos se tienen que deshabilitar en un formulario por accesibilidad y por usabilidad. ¿Se tiene que deshabilitar botones en un formulario? ¿Y qué tal un input submit? Descúbrelo en este artículo que da recomendaciones sobre cómo debes trabajar la accesibilidad en los formularios.

EL RINCÓN DEL DISEÑADOR 🎨 
Nombres son complejos, mostrando iniciales para un componente de Avatar

Cuando se diseñan avatares de usuarios para nuevos proyectos, se tienen dos opciones muy comunes, o un icono genérico o usar las iniciales del nombre de la persona. Pero usar iniciales no es sencillo cuando tus usuarios pueden ser de todo el mundo.

HERRAMIENTA 🛠️ 
htmldocs

Con esta herramienta vas a poder generar documentos PDF utilizando solo HTML y CSS. Para que puedas programarlos y no tener que volver a editar usando el mouse.

Palettify

Aquí tienes otra herramienta para generar paletas de colores para tus proyectos de una forma interactiva y sencilla. Lo interesante de esta primer versión es que al poder guardar tus temas ya hay toda una galeíia de temas.

GUÍA 📖 
Optimizando videos

Estas utilizando videos en tus proyectos de Next.js, entonces tienes que leer esta guía para optimizarlos. Sobre todo si los estas hospedando en Vercel.

NOTICIA 📰 
Desarrolladores están decepcionados con Apple

Al menos en Europa, los desarrolladores (agencias e individuos), están decepcionados con las medidas impuestas que restringen cada vez más las opciones para obtener ingresos y funcionar en el ecosistema de Apple.

UN DÍA COMO HOY 🗓️ 

El 27 de febrero de 2008, la Comisión antimonopolio de la Unión Europea, multa a Microsoft, , Microsoft con un cifra récord de €899 millones (US$1,35 mil millones).

Es la mayor multa jamás impuesta a una sola empresa en la historia hasta el momento.

El motivo de la multa es el incumplimiento de 2,004 órdenes de la Comisión de reducir los derechos de licencia para los datos de interoperabilidad y las patentes requeridas por las empresas de software para el desarrollo de software compatible con Windows.

En marzo de 2004, la comisión descubrió que la Microsoft ocultaba información en un intento por obstaculizar el desarrolladores de productos compatibles con Windows de compañías rivales.

Al anunciar la multa récord, la Comisión afirmó: "Microsoft ha sido la primera compañía en 50 años que esta comisión ha tenido que multar por no cumplir con una decisión antimonopolio".

VACANTE 💼 
Senior UI/UX Designer (Figma), Remote Mexico

Ubicación: México (Remoto)
Empresa: Luxoft
Requisitos: Experto en UX/UI con trayectoria comprobada y apasionado por crear interfaces de usuario eficientes • Más de 5 años en el espacio UI/UX • Conocimiento casi perfecto de CSS/HTML y al mismo tiempo comprensión de los principios básicos de la construcción de la arquitectura de la información. • Es imprescindible tener experiencia con Figma (o una herramienta comparable)
Responsabilidades: • Diseñar interfaces de usuario • Proponer e implementar activamente mejoras UI/UX • Mantener artefactos UX/UI como libros de cuentos, guías de estilo y sistemas de diseño generales. • Incorporar las ideas y comentarios en maquetas. • Promover mejores prácticas y estándares.

¿Te interesó esta vacante? Aquí te dejamos el link para aplicar. 🤞 

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

Implementar un editor de texto enriquecido (WYSIWYG) desde cero puede ser bastante complejo, especialmente para cubrir todos los aspectos de manera segura y eficiente. Sin embargo, te proporcionaré un ejemplo básico de cómo empezar con algunas funcionalidades fundamentales: negrita, cursiva, subrayado, e inserción de enlaces. Ten en cuenta que document.execCommand está marcado como obsoleto, y su uso puede no ser recomendado para proyectos nuevos. Para una implementación en producción, considera usar bibliotecas existentes como Quill, CKEditor, o TinyMCE.

HTML:

<div id="editor-toolbar">
  <button id="boldBtn">Negrita</button>
  <button id="italicBtn">Cursiva</button>
  <button id="underlineBtn">Subrayado</button>
  <button id="linkBtn">Insertar Enlace</button>
</div>
<div id="editor" contenteditable="true" style="border: 1px solid #ccc; min-height: 200px; padding: 10px;"></div>

JavaScript:

document.addEventListener('DOMContentLoaded', () => {
    // Función para aplicar el estilo de formato
    function aplicarEstilo(comando, valor = null) {
        document.execCommand(comando, false, valor);
    }

    // Event listeners para los botones
    document.getElementById('boldBtn').addEventListener('click', () => aplicarEstilo('bold'));
    document.getElementById('italicBtn').addEventListener('click', () => aplicarEstilo('italic'));
    document.getElementById('underlineBtn').addEventListener('click', () => aplicarEstilo('underline'));

    document.getElementById('linkBtn').addEventListener('click', () => {
        const url = prompt('Ingrese la URL del enlace:');
        if (url) aplicarEstilo('createLink', url);
    });
});

• El HTML define una barra de herramientas con botones para las acciones de negrita, cursiva, subrayado, e inserción de enlaces, además de un div editable que actúa como el área de edición del texto.

• El JavaScript añade event listeners a los botones. Cuando se hace clic en un botón, se llama a document.execCommand con el comando correspondiente (como 'bold', 'italic', 'underline', 'createLink'), que aplica el formato al texto seleccionado en el área editable.

• Para el comando 'createLink', se solicita al usuario que ingrese una URL a través de un prompt, y luego se utiliza esta URL como valor para el comando.

Este ejemplo proporciona una base sobre la cual puedes expandir con funcionalidades más avanzadas y personalizaciones. Sin embargo, para usos más complejos y para garantizar la compatibilidad y seguridad, es recomendable explorar bibliotecas especializadas en edición de texto enriquecido.

CHALLENGE DE HOY ⚔️ 
Implementa una Biblioteca para Manejar Observables

Un observable es un objeto que produce valores (puede ser cualquier cosa: números, eventos, etc.) a lo largo del tiempo y permite a los suscriptores reaccionar ante estos valores. Tu tarea es implementar una clase Observable que permita:

• Crear observables que emitan valores.

• Suscribirse a los observables para reaccionar ante los valores emitidos.

• Cancelar la suscripción a un observable.

Tareas a realizar:

1. Implementa la clase Observable con métodos para:

   • Suscribirse a los valores emitidos.

   • Emitir valores a todos los suscriptores.

   • Cancelar la suscripción de los suscriptores.

2. Asegúrate de que los suscriptores puedan reaccionar a los valores emitidos por el observable.

3. Proporciona una forma de finalizar un observable, limpiando todos los suscriptores.

Ejemplo de uso:

const observable = new Observable((subscriber) => {
  subscriber.next(1);
  subscriber.next(2);
  setTimeout(() => subscriber.next(3), 1000);
});

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

// Cancelar la suscripción después de 1500 ms
setTimeout(() => {
  subscription.unsubscribe();
  console.log('Suscripción cancelada');
}, 1500);

Código Base para Empezar:

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

  subscribe(observer) {
    const subscriber = {
      next: (value) => observer.next(value),
      complete: () => observer.complete && observer.complete(),
    };

    this._subscribe(subscriber);

    return {
      unsubscribe: () => {
        // Implementar la lógica para cancelar la suscripción
      }
    };
  }
}

• Piensa en cómo almacenar y manejar múltiples suscriptores dentro de tu observable.

• Considera escenarios en los que los observables pueden emitir valores inmediatamente después de la suscripción o de manera asíncrona, como en el caso de eventos o respuestas de API.

Este desafío evalúa tu comprensión de los patrones de diseño observables y la programación reactiva, así como tu habilidad para implementarlos en JavaScript.

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 👀