#165 Que paso con la API de monetización Web

Que paso con la API de monetización Web

Hubo una vez, una pequeña API que iba a cambiar el mundo de la Web para siempre, y luego llego la Web3 y las cryptos y el enfoque, se perdió. Pero ahora hay gente que se preocupa y quiere que vuelva a funcionar, y si tienes una voz como la de Chris Coyier, entonces vas a hacer eco indudablemente.

Remix va a por Next.js

Seamos honestos. Un framework o (meta)framework, como son Remix y Next.js, están construidos para solucionar los deseos de sus desarrolladores y estos a veces se alinean mas con las empresas que pagan sus salarios que con los de la comunidad. Y Next.js ha estado cada vez más alineándose a los de Vercel. Por eso, si hay competencia habrá diversidad y opciones para elegir, y eso se celebra. 🎉 

EL RINCÓN DE CSS 👨‍💻 
Animando font-palettes

Esta es una de esas características de CSS que no sabias que existía, pero que estabas necesitando. Aunque quizás primero debas leer este articulo.

VIDEO 📹️ 
5 React App anti-patterns

Este video tiene una serie de ejemplos de anti-patrones que podrían estar afectando tu desarrollo con React, aunque algunos quizás sean muy subjetivos ¿tú qué opinas?

HERRAMIENTA 🛠️ 
_hyperscript

Si hubo necesidad y espacio para HTMX, lo habrá para hypescript. Una forma de trabajar con HTML y JavaScript con énfasis en la developer experience. Aunque _hyperscript no esta listo para producción, esta en desarrollo continuo y quizás le veamos competir contra HTMX pronto.

Variable Fonts

Si eres un frontendero que también es diseñador, entonces quizás eliges las variables de tus tipografías escribiendo el código y experimentando, pero esto puede ser tardado, imagina que pudieras interactuar con los pesos y anchos en un sitio web de forma gratuita para poder decidir, pues no imagines mas y prueba este sitio donde podrás hacerlo.

LANZAMIENTO 🚀 
Svelte 5 preview

¿Estas emocionado por el lanzamiento de Svelte 5? En este link, encontrarÁs la documentación del pre-release y para que aprendas sobre la nueva API de runas que esta versión traerÁ.

UN DÍA COMO HOY 🗓️ 

El 23 de febrero de 1998, nace el Proyecto Mozilla, fruto de la liberación del código fuente de la serie 4.x de Netscape Navigator y actualmente cuenta con el apoyo organizativo, legal y financiero de la Fundación Mozilla.

La fundación Mozilla fue lanzada el 15 de julio de 2003 para permitir la continuidad del proyecto Mozilla más allá de la participación de voluntarios individuales.

Netscape inició el Proyecto Mozilla cuando aceptó que había sido derrotado por Microsfot con su navegador Internet Explorer el cual para el momento era de lejos el Navegador más usado, esto incentivó a Netscape a publicar el código fuente de de navegador con la esperanza de que se convirtiera en un popular proyecto de código abierto.

Este código fue puesto bajo la Licencia Pública Netscape, la cual es similar a la GNU (General Public License) para el Communicator 4.5 Netscape.

El Navegador Mozilla Firefox fue lanzado el 09 de noviembre de 2004. Inicialmente fue denominado Phoenix.

VACANTE 💼 
Engineering Team Lead (Javascript)

Ubicación: México (Remoto)
Empresa: Deel
Requisitos: Experiencia en tecnologías JavaScript para diseño, desarrollo y pruebas de aplicaciones (Nuestro equipo utiliza Node.js en el backend y React.js en el frontend). Buen conocimiento de TypeScript y desarrollo de aplicaciones además de API RESTful. Liderar equipos pequeños y al mismo tiempo ser práctico es fácil. Tener una verdadera pasión por desarrollar experiencias de usuario que sean nada menos que increíbles.
Beneficios: Equipo informático aplicable a su rol. Oportunidades de concesión de acciones. Beneficios y ventajas adicionales según su situación laboral y país. La posibilidad de elegir dónde trabajar, ya sea en casa, en la playa o en WeWork.

¿Te interesó esta vacante? 😏 Aquí te dejamos el link para que puedas conocer más y pueda aplicar. 🤞 

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

function esPalindromo(cadena) {
    // Eliminar espacios, signos de puntuación y convertir a minúsculas
    const cadenaLimpia = cadena.replace(/[\\W_]/g, '').toLowerCase();

    // Comparar la cadena limpia con su versión invertida
    const cadenaInvertida = cadenaLimpia.split('').reverse().join('');

    return cadenaLimpia === cadenaInvertida;
}

// Ejemplo de uso
console.log(esPalindromo("Anita lava la tina")); // Debería retornar true
console.log(esPalindromo("Hello, world!")); // Debería retornar false

• Primero, la función esPalindromo limpia la cadena de entrada usando replace con una expresión regular /[\\\\W_]/g que coincide con todos los caracteres que no son alfanuméricos (incluidos espacios y signos de puntuación) y los elimina. La llamada a toLowerCase asegura que toda la cadena se convierta a minúsculas.

• Luego, la cadena limpia se invierte utilizando split('') para convertirla en un array de caracteres, reverse() para invertir el array, y join('') para volver a unir los caracteres en una cadena.

• Finalmente, se compara la cadena limpia con su versión invertida. Si son iguales, la función retorna true, indicando que la cadena es un palíndromo. De lo contrario, retorna false.

CHALLENGE DE HOY ⚔️ 
Utiliza CSS para diseñar y animar una tarjeta de presentación que revele información adicional cuando el usuario pasa el cursor sobre ella.

Las tarjetas de presentación son una forma efectiva de compartir información de contacto y profesional de manera concisa. Tu tarea es crear una tarjeta de presentación utilizando HTML y CSS que muestre información básica en su estado normal, pero al pasar el cursor (hover), se transforme para revelar detalles adicionales como enlaces a redes sociales o un breve lema profesional.

Tareas a realizar:

1. Diseñar una tarjeta de presentación con HTML y CSS que muestre el nombre, el título profesional y una imagen o ícono representativo en su estado normal.

2. Al pasar el cursor sobre la tarjeta, debe cambiar su apariencia para revelar información adicional como el correo electrónico, número de teléfono, y enlaces a perfiles de redes sociales.

3. Implementar transiciones o animaciones suaves para el cambio de estado de la tarjeta.

Ejemplo de estructura HTML:

<div class="tarjeta">
    <div class="informacion-basica">
        <!-- Información visible inicialmente -->
    </div>
    <div class="informacion-adicional">
        <!-- Información revelada al pasar el cursor -->
    </div>
</div>

• Utiliza :hover para definir el estado de la tarjeta cuando el usuario pasa el cursor sobre ella.

• Experimenta con propiedades como transform, opacity, y transition para crear efectos visuales atractivos.

• Asegúrate de que la tarjeta sea accesible y fácil de leer en diferentes dispositivos y tamaños de pantalla.

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 👀