#147 Construyendo un layout para un Hero

Construyendo un layout para un Hero

El año es 2011, acabas de llegar a tu oficina o al lugar donde trabajas y te pones cómodo, vienes de hablar con el cliente y el diseño ha sido aprobado, entonces es tiempo de ponerte a programar. Primero haces el layout en HTML y de ahí preparas tu CSS con esta nueva herramienta que has visto que están usando mucho que se llama Sass. Como no encuentras cómo hacer algo, vas y buscas en tus blogs de frontend favoritos por inspiración y hacks. La vida es bella. Luego despiertas y te das cuenta que tu puedes hacer lo mismo para los que vienen detras de ti en 2024, ve y haz blog posts sobre frontend puro y duro como el que te compartimos aquí.

La muerte anunciada de Ello

¿Alguna vez oíste de Ello? Ello, fue una red social que apuntaba a mucho y fue un buen lugar mientras duró, pero a veces hay que ser más consecuente con nuestras acciones. Y esto puede aplicar a cualquier red social, por eso no hay lugar como el sitio web personal.

Migrando del framework Serverless a AWS CDK

Hay tantos frameworks para construir proyectos Web, como hay granos de arena en las playas de Colima. Y aunque muchos ofrezcan opciones para construir de forma rápida, a veces se tiene que evaluar a largo plazo. Por ejemplo, si vas a desplegar en una nube y esta ofrece su propio framework y SDK, quizás valga la pena que lo uses.

HERRAMIENTA 🛠️ 
Utopia SCSS

El diseño responsivo fluido, es un termino que quizás has leído por ahí recientemente y también hace 10 años, y si eres frontendero necesitas conocer. Y que mejor que con este conjunto de herramientas que te ayudarán a crear cualquier layout web que se te venga a la mente.

The Bun Shell

Una característica muy importante de cualquier lenguaje o runtime moderno, es la capacidad de poder interactuar a través de un shell con el código que uno esta programando. Y ahora Bun tiene su propio shell para correr código JavaScript y TypeScript.

INISPIRACIÓN 💡 
Sitios del 2023 por Readymag

Readymag, es una plataforma no-code para construir sitios web, blogs, periódicos y portafolios, entre otras cosas, como WebFlow o Framer y también sacó su listado de los mejores sitios que hospedan del 2023. Pasa e inspírate.

NOTICIA 📰 
Next.js 14.1

Parece que apenas fue ayer cuando Next anunció su versión 14. Y aunque esta es una menor versión, al ser la primera, siempre es importante actualizar y usarla porque soluciona problemas de desempeño y seguridad que muchos frontenderos van encontrando al lanzarse una mayor versión.

UN DÍA COMO HOY 🗓️ 

El 05 de febrero de 2001, Microsoft anuncia oficialmente que su nueva versión de Windows denominada con el nombre código “Whistler” se conocerá como Windows XP.
La abreviatura “XP” proviene de la palabra "eXPeriencia".
De Igual manera, la próxima versión de Microsoft Office también llevará se conocerá como “Office XP”.
Microsoft declaró que el nombre "simboliza las ricas y extensas experiencias de usuario de Windows y Office pueden ofrecer al abrazar los servicios Web que abarcan una amplia gama de dispositivos".

VACANTE 💼 
React Developer

Ubicación: Guadalajara, Jalisco, México
Empresa: Neostella
Requisitos: Mínimo 1 año de experiencia en desarrollo de software. Se requiere experiencia desarrollando React. Se requiere experiencia con Javascript La experiencia con Typecript es una gran ventaja. Entre otros.

¿Qué tecnologías utilizará esta persona en su día a día? Javascript, mecanografiado Reaccionar GitHub AWS amplificar jira Centinela

Si quieres aplicar a esta vacante, entra aquí.

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

function paridadArray(numeros) {
    return numeros.map(numero => numero % 2 === 0 ? "par" : "impar");
}

// Ejemplo de uso
console.log(paridadArray([1, 2, 3, 4])); // Debería retornar ["impar", "par", "impar", "par"]
console.log(paridadArray([10, 15, 20, 25])); // Debería retornar ["par", "impar", "par", "impar"]

• La función paridadArray toma un array numeros como argumento.

• Usa el método map para iterar sobre cada numero en el array numeros.

• Dentro de map, para cada numero, se evalúa si es par (numero % 2 === 0). Si la condición es verdadera, se retorna el string "par". De lo contrario, se retorna el string "impar".

• El resultado es un nuevo array de strings, donde cada string representa la paridad ("par" o "impar") del número correspondiente en el array original.

CHALLENGE DE HOY ⚔️ 

Crea una función en JavaScript que, dados dos objetos, fusione sus propiedades en un nuevo objeto. Si ambos objetos contienen la misma clave, el valor del segundo objeto debe prevalecer.

1. Implementa una función fusionarObjetos que acepte dos objetos (objeto1 y objeto2) como argumentos.

2. La función debe retornar un nuevo objeto que combine las propiedades de objeto1 y objeto2.

3. Si objeto1 y objeto2 tienen propiedades con el mismo nombre, el valor de la propiedad en objeto2 debe prevalecer.

Ejemplo de uso:

const objeto1 = { nombre: "Ana", edad: 25 };
const objeto2 = { apellido: "García", edad: 26 };

console.log(fusionarObjetos(objeto1, objeto2));
// Debería retornar { nombre: "Ana", apellido: "García", edad: 26 }

• Considera utilizar el operador de propagación (...) para una forma concisa y efectiva de fusionar objetos.

• Recuerda que el orden en que aplicas el operador de propagación afecta a qué valores prevalecen en caso de propiedades duplicadas.

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 👀