#184 Lift-off, el lanzamiento del Curriculum de MDN

Lift-off, el lanzamiento del Curriculum de MDN

Firefox decidió lanzar un MDN curriculum con las materias y temas que necesitas saber para ser el mejor frontendero. Y la verdad es que les quedo muy completo. ¿Te gustaría que lo reseñaramos en el reinicio del podcast de Frontenderos? Coméntanos si te gustaría que volviéramos con la cuarta temporada y que este fuera el primer tema del que habláramos.

¿Por qué uso Firefox?

Firefox ha vuelto a ser indie, el símbolo de resistencia frente a la omnipresencia de Chrome y poco más. Si no lo usas, porque en algún momento lo hiciste y era lento, quizás necesitas volver a darle una oportunidad. Además, aunque no lo mencione en este artículo, Firefox tiene las mejores herramientas para trabajar con CSS, así que, a instalarlo.

Cuando mi trabajo soñado se convirtió una pesadilla

El burnout en el trabajo se puede originar de muchas maneras, y en nuestra industria, que ha cambiado los estándares de trabajo y las dinámicas del mismo, esto se traduce en que realmente nunca dejamos de pensar en el… después de todo, somos la generación que creció con la frase de, “si haces lo que te gusta, realmente no es trabajo”, ¿verdad? Si sientes que tu trabajo te ahoga, necesitas leer esto.

Explorando los Lifecycle Hooks de Vue 3

Si estas haciendo una entrevista laboral para una chamba de Vue 3, o estas trabajando en optimizar un proyecto, necesitas saber todo sobre cómo funcionan los Lifecycle hooks. Son solo 8, y si sabes React desde cuando se usaban classes y no funciones, no se te va a complicar mucho.

GUÍA 📖 
Reportando Core Web Vitals con la API de Performance

Si estas interesado en temas de optimización y en SEO, quizás has leído de Core Web Vitals, y para complementar lo que sabes necesitas utilizar esta API Web llamada Performance.

INISPIRACIÓN 💡 
17 ecuaciones que cambiaron el mundo

¿Quién dijo que no se puede hacer matemáticas con JavaScript? Para prueba, 17 ecuaciones traducidas a nuestro lenguaje favorito.

HERRAMIENTA 🛠️ 
Wacat

Hace muchos años, era muy popular una biblioteca para chaos testing llamada gremlins.js, que ya no está siendo mantenida. Pero es una de las mejores maneras para hacer testing, y pensando en eso, alguien dijo, “¿y si hacemos una biblioteca simulando que un gato se sube al teclado de tu computadora y vemos qué pasaría?” Eso es Wacat.

Nuxt Test Utils

Si desarrollas con Nuxt, este conjunto de utilidades para hacer testing, te va a gustar. Con integración para jest o vitest, happy-dom o js-dom y Playwright, vas a encontrar ayuda para todos los tipos de testing que se te ocurran.

NOTICIA 📰 
OpenJS lanza una nueva colaboración para mejorar la interoperabilidad de la metadata de las bibliotecas JavaScripts empaquetadas en multiples repositorios

Es official, hay demasiados manejadores de paquetes y hay muchas bibliotecas en el ecosistema y muchas variantes del package.json que la OpenJS decidió que es tiempo de una estandarización. Ya era hora.

LANZAMIENTO 🚀 
Que hay de nuevo en la Web como plataforma en Febrero

Esto no para, y aunque te hacemos la recomendación de que tomes tu tiempo para leer de noticias y actualizaciones en cuanto a las tecnologías Web para que no caigas en fatiga, de vez en cuando vale la pena saber que puedes hacer en la Web sin ayuda de bibliotecas de forma nativa. Hace unos días, reportamos que Firefox ya soporta Shadow DOM declarativo, pero no es todo lo que pasó en Febrero.

UN DÍA COMO HOY 🗓️ 

El 13 de marzo de 2013, Google anuncia que descontinuará Google Reader.
Indica que el producto tiene un leal pero reducido número de usuarios y quiere centrarse en un menor número de productos.
Google establecen el 01 de julio de 2013 como fecha límite para que sus usuarios migren sus datos.
Google sugiere a sus usuarios : "Si desea conservar los datos del lector , incluyendo las suscripciones, puede hacerlo a través de Google Takeout".
Tras el anuncio del cierre, Feedly anuncia que más de 500.000 nuevos usuarios se habían unido en las siguientes 48 horas y 3 millones en las siguientes dos semanas.
En respuesta al cierre previsto , Digg también anunció planes para construir un reemplazo Google Reader, la reconstrucción de su API y la adición de características para aprovechar las recomendaciones implícitas de actividad de la red social.
Varias peticiones se realizaron para mantener Google Reader en ejecución, entre ellos uno en Change.org con más de 100.000 firmas la cual por su puesto no tuvo ningún éxito.
Se especula que la verdadera razón para el cierre de Google Reader fue para tratar de mantener a todos leyendo y compartiendo información a través de Google+.

VACANTE 💼 
Developer Sr Fullstack React/Node

Ubicación: México (Remoto)
Empresa: Gluo
Requisitos: Inglés: Capaz de entablar conversaciones fluidas y técnica con equipos, ademas de poder leer y recatar documentación. Con experiencia de al menos 5 años como desarrollador usando JavaScript y Typescript. Al menos 3 años utilizando React.js y Next.js. Sólido conocimiento de tecnologías y técnicas web modernas como HTML, CSS, Graphql, Next.js, Chakra UI y React Query. Experiencia en la industria en comercio electrónico o retail con sistemas POS/OMS. Entre otros.
Beneficios: Somos una agencia que se preocupa por tu bienestar, donde valoramos mucho la calidad de vida y la confianza por lo que trabajamos en un esquema responsabilidad-libertad. Homeoffice - Trabajarás desde casa. 🌎 Te divertirás y pasarás buenos momentos junto con compañeros extraordinarios. Trabajarás por alcance de metas y objetivos. El desarrollo y el crecimiento profesional tú lo marcas, nosotros te apoyamos. Tú decides hacia dónde quieres que vayas tu carrera y crecemos juntos. Entre otros.

¿Te interesa esta vacante? Aquí te dejamos el link para que puedas conocer más. 🤞 

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

Para determinar si dos cadenas son anagramas, debemos limpiar las cadenas primero (eliminando espacios, números y puntuación, y convirtiéndolas a minúsculas) y luego verificar si tienen los mismos caracteres en la misma cantidad. Aquí te muestro cómo podrías hacerlo:

function esAnagrama(cadena1, cadena2) {
    // Función auxiliar para limpiar y ordenar las cadenas
    function prepararCadena(cadena) {
        return cadena
            .toLowerCase() // Convertir a minúsculas
            .replace(/[^a-z]/g, '') // Eliminar caracteres no alfabéticos
            .split('') // Convertir la cadena en un array de caracteres
            .sort() // Ordenar el array alfabéticamente
            .join(''); // Unir el array en una cadena nuevamente
    }

    // Preparar ambas cadenas para la comparación
    const cadenaLimpia1 = prepararCadena(cadena1);
    const cadenaLimpia2 = prepararCadena(cadena2);

    // Comparar las cadenas limpias y ordenadas
    return cadenaLimpia1 === cadenaLimpia2;
}

// Ejemplo de uso
console.log(esAnagrama("Amor", "Roma")); // Debería retornar true
console.log(esAnagrama("Hola", "Adiós")); // Debería retornar false
console.log(esAnagrama("Dormitory", "Dirty room")); // Debería retornar true

• La función esAnagrama toma dos cadenas como argumentos y utiliza una función auxiliar prepararCadena para limpiar y ordenar las cadenas antes de compararlas.

• prepararCadena convierte la cadena a minúsculas con toLowerCase, elimina todos los caracteres que no sean letras con replace y una expresión regular, convierte la cadena en un array de caracteres con split, ordena el array alfabéticamente con sort, y finalmente une el array de vuelta en una cadena con join.

• Al final, esAnagrama compara las dos cadenas preparadas. Si son iguales, significa que las cadenas originales son anagramas entre sí, y la función retorna true. De lo contrario, retorna false.

CHALLENGE DE HOY ⚔️ 
Implementar una Función de Debounce

La técnica de "debounce" es útil para asegurar que una función no se ejecute tan pronto como se dispara un evento, sino que espera un cierto tiempo antes de hacerlo. Esto es especialmente valioso para eventos que se disparan muy frecuentemente, como el scroll o el keypress. Tu tarea es implementar una función debounce que reciba una función func y un retardo delay como argumentos, y retorne una nueva función que limite la ejecución de func hasta que hayan pasado delay milisegundos desde la última vez que se invocó.

1. Implementa una función debounce que acepte dos argumentos: una función func a ejecutar y un número delay que representa el retardo en milisegundos.

2. La función debounce debe retornar una nueva función.

3. Cuando se invoca la función retornada, func solo debería ejecutarse después de que hayan pasado delay milisegundos desde la última vez que se invocó.

4. Asegúrate de que si la función retornada se invoca nuevamente durante el período de retardo, el temporizador se reinicie.

Ejemplo:

// 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

• Utiliza setTimeout para implementar el retardo y clearTimeout para cancelar el retardo si la función se vuelve a invocar durante el período de espera.

• Mantén un identificador de temporizador para poder cancelarlo cuando sea necesario.

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 👀