#146 ¿Eres nuevo frontendero? No uses React

¿Eres nuevo frontendero? No uses React

No hay porque correr antes de saber gatear, dice el dicho, y tampoco necesitas aprender React si apenas estas iniciando como frontendera o frontendero. Puede que sientas presión desde el día 1 para usar una herramienta como una biblioteca o framework, pero no te apresures, en especial con React. Es mejor si dominas los fundamentos de HTML, CSS y JavaScript y luego ya te pones a aprender y practicar con React.

Cinco roles futuros para diseñadores

La revolución industrial trajo consigo una revolución de trabajos; algunos desaparecieron y otros se crearon. Esta pasando lo mismo con la revolución informática que hemos estado viviendo desde hace 50 o 60 años. Aunque aun no se sabe con certeza como serán los trabajos del futuro, a veces uno puede imaginárselos.

INISPIRACIÓN 💡 
¿Qué es belleza?

La belleza es algo que el ser humano ha estado buscando desde que comenzó a tener conciencia y filósofos como Immanuel Kant ha explorado. ¿Y que tiene que ver eso con diseño y web y mi carrera como frontendero?, te estarás preguntando. 🤔 Tiene todo que ver, ya que después de todo un buen diseño, es un diseño estético.

EL RINCÓN DE CSS 👨‍💻 
Layout breakouts con CSS Grid

Una de las características mas divertidas de CSS Grid, es la propiedad de areas, columnas y filas con las que puedes definir cualquier layout que se te ocurra, y una de las cosas que menos se habla, es sobre como hacerlos responsivos y fluidos. Con este articulo aprenderás a hacerlo y evolucionaras tu juego.

HERRAMIENTA 🛠️ 
LoaderShip

No importa que tipo de proyecto web estes construyendo, tarde o temprano vas a necesitar un load spinner, y que mejor que sea con solo CSS. Si necesitas una herramienta que te permita generarlos fácilmente, no busques más.

GUÍA 📖 
TDD, escribe código que sea testeable

¿Te suena el nombre de Eric Elliot? Eric es uno de los principales promotores de Testing en JavaScript, y esta guía es un resumen de todo el trabajo que ha hecho para que te inicies es el mundo del testing.

NOTICIA 📰 
Actualización sobre Web Components

Hace unas semanas se reunió el W3C Web Components Community Group en conjunto con gente de navegadores, bibliotecas y miembros de la comunidad web para hablar sobre el futuro de los Web Components, y hay muy buenas noticias para el (re)naciente ecosistema.

UN DÍA COMO HOY 🗓️ 

El 04 de febrero de 2004, Mark Zuckerberg lanza "Thefacebook", originalmente ubicada en thefacebook.com.
La membresía se limita inicialmente a los estudiantes de la Universidad de Harvard.
Facebook se constituyó a mediados de 2004, y el empresario Sean Parker (quien asesoró informalmente a Zuckerberg) se convirtió en presidente de la compañía.
Mark Zuckerberg escribió “Facemash”, el predecesor de Facebook, el 28 de octubre de 2003, mientras asistía a la Universidad de Harvard como estudiante de segundo año.
Era un sitio que utilizando fotos de los estudiantes solicitaba al usuario votar por la persona “más caliente del momento”.

VACANTE 💼 
Web Developer - Remote, Full-Time

Ubicación: Tijuana, Baja California (Remoto)
Empresa: Bluelight Consulting | DevOps & Software Development
Requisitos: Experiencia laboral verificable en WordPress CMS y desarrollo de temas personalizados. Importante experiencia laboral en PHP con increíbles habilidades en HTML, CSS y JavaScript. Capacidad para crear un sitio limpio y bueno, basado en maquetas y archivos de imágenes divididos. Familiarizado con Core Web Vitals y cómo probarlos e informarlos. Sólido conocimiento sobre el cumplimiento de la ADA, lo suficientemente flexible e ingenioso para adaptarse y cumplir con esos estándares. Entre otros.
Beneficios: Salario y bonificaciones competitivos, incluidos aumentos salariales basados ​​en el desempeño. Generosa política de tiempo libre remunerado Estipendio de tecnología/oficina Trabajo 100% remoto, ahora y post-COVID Educación continua, formación y congresos. Cursos, exámenes y certificaciones patrocinados por la empresa

¿Teinteresa y quieres saber más? Aquí te dejamos el link.

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

function concatenarYFiltrar(...arrays) {
    // Concatenar todos los arrays en uno solo
    const arrayConcatenado = [].concat(...arrays);

    // Filtrar elementos duplicados
    const resultado = arrayConcatenado.filter((valor, indice, self) => {
        return self.indexOf(valor) === indice;
    });

    // Alternativamente, podrías usar un Set para eliminar duplicados de forma más eficiente
    // const resultado = [...new Set(arrayConcatenado)];

    return resultado;
}

// Ejemplo de uso
console.log(concatenarYFiltrar([1, 2], [2, 3, 4], [4, 5])); // Debería retornar [1, 2, 3, 4, 5]

• La función concatenarYFiltrar usa el operador de propagación (...) para aceptar un número variable de argumentos de array.

• Utiliza concat para combinar todos los arrays pasados como argumentos en un solo array.

• Luego, emplea filter para eliminar los elementos duplicados. Dentro de filter, verifica si el índice del elemento actual (indice) es igual a su primer índice en el array (self.indexOf(valor)). Esto asegura que solo se incluyan en el resultado los elementos únicos.

• Como alternativa, el comentario muestra cómo podrías utilizar un Set para lograr el mismo objetivo de manera más directa. Un Set es una estructura de datos que solo puede contener valores únicos. Al convertir el arrayConcatenado en un Set y luego de vuelta en un array, automáticamente se eliminan los duplicados.

CHALLENGE DE HOY ⚔️ 
Crea una función en JavaScript que convierta un array de números en un array de strings, donde cada string indique si el número correspondiente es "par" o "impar".

1. Implementa una función paridadArray que acepte un array de números como argumento.

2. La función debe retornar un nuevo array de strings. Cada elemento debe ser "par" si el número correspondiente es par, y "impar" si el número es impar.

3. Asegúrate de que la función no modifique el array original.

Ejemplo:

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"]

• Puedes utilizar el método map para crear un nuevo array basado en el original, aplicando la lógica de paridad a cada elemento.

• Recuerda que un número es par si el resto de su división por 2 es igual a 0.

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 👀