_{¡Llegamos al número 100! ¡Muchas gracias por acompañarnos, a por los siguientes 100 números y más allá!} 🥂

View Transitions con Angular 17

Si un framework JavaScript moderno no tiene soporte para la API de View Transitions, sus usuarios se están perdiendo de una de las cosas más chidas que le pasó al desarrollo Web este año. Por fortuna, Angular 17 viene con soporte para esta API, y en este artículo te explican como usarlo.

No necesitas JavaScript para eso

2024 será el año en el que te vuelvas a enamorar de HTML 😍 de tanto que vas a leer artículos, guías, herramientas y noticias sobre cosas que puedes hacer, que no sabías, que vas a encontrar en este newsletter. Y cuando leas este articulo, vas a descubrir cosas que puedes hacer solo con HTML y CSS que antes necesitabas usar JavaScript o más complicado aún: instalar una biblioteca de JavaScript para la tarea.

Las cosas que aprendió el creador de Vue con la versión 3

Evan You, dió una cátedra en la VueConf 2023 en Toronto, sobre las cosas complicadas que él y su equipo se encontraron en la transición hacia la versión 3 de Vue y las cosas que cree que hicieron bien.

Codrops Frontend Rewind 2023

Codrops está sacando un articulo diario con lo más destacado del mundo del Frontend este año. Tienes que leerlo y leer todos los demás artículos.

HERRAMIENTA 🛠️ 

TSDocs

Imagina esto, estas trabajando con un proyecto en TypeScript, instalas una biblioteca, y de pronto tu linter se comienza a quejar de que hay error con algún type y tu, como buen frontendero, no le pones any sino que te pones a investigar como solucionarlo correctamente, entonces necesitas esta herramienta sí o sí para que te sea más fácil navegar por la documentación de los types de las bibliotecas más populares en npm.

Spacetime

Trabajar con fechas y horas es complicado, aunque puedes utilizar las APIs nativas del navegador, a veces necesitarás una herramienta para salir de apuros. Y, si andas buscando alternativas ligeras para trabajar con fechas y horas, te podemos recomendar spacetime, porque solo pesa 40kb y la puedes instalar desde npm o bajar el script e insertarlo directamente en tu proyecto.

INSPIRACIÓN 💡 
GitHub Unwrapped 2023

¿Contribuiste mucho a proyectos Open Source este año? ¿Quieres ver una recopilación de tus logros en Github? Solo ingresa tu username y deja que la magia suceda. ✨ 

NOTICIA 📰 
SvelteKit 2

SvelteKit, el framework para construir aplicaciones web oficial de Svelte, ya tiene versión 2 con soporte para Vite 5 y shallow routing, además de mejoras para Svelte 5 y i18n.

VSCode November update

Ya hay nueva versión de Noviembre de VSCode, el editor de código más popular, con mejoras en accesibilidad y en GitHub Copilot entre otras.

Safari 17.2

En los últimos 24 meses, Safari ha ido de la versión 15.0 a la 17.2 con 14 versiones menores y 3 versiones mayores, reflejo de la apuesta que esta haciendo Apple por el desarrollo web. La versión 17.2 viene cargada con muchas mejoras que tienes que revisar.

TC39 FAQ

El comité responsable de trabajar con ECMAScript ,y por consecuencia, JavaScript, acaba de anunciar un FAQ que van a estar actualizando para resolver preguntas frecuentes que los devs puedan tener respecto al estándar.

GUÍA 📖 
SVG Tutorial

Aprende a trabajar con SVG como propósito de año nuevo, con esta serie de tutoriales muy navideños. 🎄 

UN DÍA COMO HOY 🗓️ 

El 20 de diciembre de 1996, Apple Computer anunció su intención de adquirir a NeXT. Apple pagó US$429 millones en efectivo mismos que fueron directamente a los inversionistas iniciales y 1.5 millones en acciones de Apple para Steve Jobs (de acuerdo al trato, deliberadamente a Steve Jobs no se le pagó en efectivo). Y Steve Jobs volvio a Apple y el resto es historia.

El 20 de diciembre de 1990, Tim Berners-Lee culmina el desarrollo del primer navegador web (browser) denominado “WorldWideWeb”. El WorldWideWeb es un navegador web y editor de páginas web en modo gráfico desarrollado exclusivamente para el sistema operativo NEXTSTEP. El desarrollo de WorldWideWeb se inició durante el mes de octubre de 1990 usando un ordenador NeXTcube en el Consejo Europeo para la Investigación Nuclear (CERN) por Berners-Lee. Y aquí comenzó la historia de la Web.

VACANTE 💼 
UI Engineer with Retool experience

Ubicación: Ciudad de México (Remoto)
Empresa: Azkait
Una plataforma móvil para administrar finanzas personales, también emitir tarjetas y otro conjunto de herramientas financieras. Tiene algunos proyectos internos nuevos para implementar que requieren más capacidad. Requerimientos: Experiencia sólida en Retool e incluye escribir consultas SQL y crear interfaces de usuario usando Retool. Mentalidad emprendedora. Superposición con la zona horaria EST.

Si te interesa, aplica aquí.

RESULTADO DEL CHALLENGE DE AYER 🧐 

¡Gracias a los que contestaron el challenge de ayer! Aquí te dejamos nuestra respuesta:

function maxProducto(array) {
    // Ordenar el array
    array.sort((a, b) => a - b);

    // El máximo producto puede estar al final o al principio si hay números negativos
    const n = array.length;
    const productoFinal = array[n - 1] * array[n - 2];
    const productoInicio = array[0] * array[1];

    return Math.max(productoFinal, productoInicio);
}

// Ejemplo de uso
const numeros = [3, -2, 5, 7, -4];
console.log(maxProducto(numeros)); // Debería devolver 28

• La función maxProducto acepta un array array de números enteros.

• Primero, el array se ordena en orden ascendente.

• Luego, calculamos dos posibles productos:

  • productoFinal es el producto de los dos últimos elementos (los más grandes).

  • productoInicio es el producto de los dos primeros elementos, que puede ser mayor si ambos son números negativos grandes.

• Finalmente, se devuelve el mayor de estos dos productos utilizando Math.max.

Este enfoque es eficiente, ya que considera tanto el caso de los números positivos más grandes como el de dos números negativos que, al multiplicarse, pueden dar un producto grande.

CHALLENGE ⚔️ 

Hoy vamos a trabajar con anagramas.
Un anagrama es una palabra o frase formada reorganizando las letras de una palabra o frase diferente, utilizando todas las letras originales exactamente una vez. Por ejemplo, "iceman" es un anagrama de "cinema". Tu tarea es crear una función que tome dos cadenas y determine si son anagramas entre sí.

• La función debe aceptar dos cadenas como argumentos.

• Debe devolver true si las cadenas son anagramas y false si no lo son.

• La comparación no debe ser sensible a mayúsculas y minúsculas.

Ejemplo:

esAnagrama("Iceman", "Cinema"); // Debería devolver true
esAnagrama("Hello", "Bye");    // Debería devolver false

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 👀