#176 Encontrando un nuevo trabajo como Software Developer

Encontrando un nuevo trabajo como Software Developer

Este es un mensaje para todas las personas ahi afuera buscando trabajo: lo vas a conseguir, ¡no te rindas! Cuando estas buscando un nuevo trabajo en nuestra industria, hay muchas variables que se toman en cuenta, algunas las puedes cubrir tu, otras dependen mucho del empleador al que estas contactando, entonces también es útil investigar como hacen sus procesos de selección y contrataciones para evitarte una sorpresa, aunque siempre las habrá. En este artículo encontrarás buenos consejos que puedes aplicar y otros que puedes extrapolar. ¡Mucha suerte! 🤞 

Hot Module Replacement es fácil

Hot Module Replacement, es el proceso por el cual puedes ver tus cambios reflejados instantáneamente sin tener que refrescar la página. Este proceso lo puedes encontrar en herramientas como Webpack o Vercel, y por supuesto Vite, y en este artículo te explican precisamente como funciona en este último.

¿Qué framework seleccionar para desarrollo móvil?

Hay dos frameworks muy populares que, a pesar de los años, siguen estando hasta arriba en la lista de herramientas favoritas para construir aplicaciones móviles, y son React Native y Flutter. La ventaja de React Native para un frontendero, es que la adopción es muy fácil, podrías estar creando tu primer aplicación en muy poco tiempo, mientras que con Flutter tienes que aprender Dart y esa es la primera curva. Pero eso no significa que React Native sea la opción para ir, puede que te guste más Flutter, y para eso, este artículo te puede ayudar.

Comienza a hablar un nuevo idioma en 3 semanas

¿Metas olvidadas? ¿Resoluciones abandonadas? Eso quedó en el pasado. Re-encuentra tu compromiso con Babbel: la aplicación de aprendizaje de idiomas que enseña conversaciones de la vida real para cualquier situación. Desde inglés y francés hasta alemán, ruso o noruego, el método de Babbel, desarrollado con más de 150 lingüistas y profesores expertos, se centra en aprender a través de la conversación. Con solo 10 minutos al día, puedes empezar a tener conversaciones reales en tan solo 3 semanas. ¡Obtén un 60% de descuento al registrarte hoy!

GUÍA 📖 
Lanza una app React en un ambiente Docker

Tarde o temprano te va a tocar lanzar una aplicación React con Docker porque muchas empresas usan este enfoque, tanto para producción, como para desarrollo, cuando los proyectos y los equipos son muy grandes para asegurarse de cierta compatibilidad. Si nunca haz usado Docker y menos para crear una aplicación React, practica con esta guía antes de que te lo pidan.

HERRAMIENTA 🛠️ 
Simple Stack

Simple Stack es una suite de herramientas construida para Astro para simplificar tu flujo de desarrollo de aplicaciones. Contiene bibliotecas que complementan y mejoran la experiencia de Astro, y lo mejor es que buscan el apoyo de la comunidad para seguir creciendo.

AI design generator

¿Necesitas una herramienta para generar diseños que luzcan profesionales y sea fácil de usar? Prueba esta herramienta por Visme, que cuenta con una capa gratuita para que lo puedas probar.

EL RINCÓN DE CSS 👨‍💻 
Scroll-Driven Animations

Este es un hack que tienes que conocer sí o sí para cuando estas trabajando con Scroll-Driven animaciones, este artículo tiene una buena explicación, demo y tabla de compatibilidad al respecto.

EL RINCÓN DEL DISEÑADOR 🎨 
Figma components checklists

¿Eres un frontendero que usa Figma para diseños, o un diseñador que esta haciendo sus pininos en frontend? Cualquiera de estos casos, necesitas guardar este sitio en tus marcadores para recordar las buenas prácticas que tienes que seguir con tus proyectos de ahora en adelante.

UN DÍA COMO HOY 🗓️ 

El 05 de marzo de 2001, Microsoft lanza Office XP (también llamado Office 2002), una versión de la suite ofimática Microsoft Office.
Office XP fue la sucesora de Office 2000 y la predecesora de Microsoft Office 2003.
Esta fue la primera y única versión de Office cuyo nombre no contiene números.
Office XP fue la última versión de Office para Windows NT 4.0, Windows 98 y Windows Me.
Una característica distintiva de Office XP era que el Word 2002 admite “Text Services Framework”, haciendo posible el reconocimiento de voz o reconocimiento de escritura a mano.
Todos los componentes individuales de Office XP terminan en 2002, lo que ha generado confusión si es Office XP o Office 2002.
El soporte técnico principal finalizó el 11 de julio de 2006. El soporte extendido finalizó el 12 de julio de 2011.

VACANTE 💼 
Front-end Developer

Ubicación: Ciudad de México (Remoto)
Empresa: Divelement
Requisitos: +5 años de experiencia con React o cualquier otro framework JS moderno como VueJS. +3 años de experiencia con UI. Experiencia con JavaScript moderno
Beneficios: Basamos nuestra compensación en los siguientes factores: ubicación, experiencia, exposición y habilidades. Divelement ofrece un entorno de trabajo remoto donde la autonomía y la responsabilidad van de la mano. Además de nuestra compensación y entorno laboral, ofrecemos PTO, vacaciones y beneficios médicos.

Aquí te dejamos el link para que puedas aplicar. 🤞 

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

HTML:

<input type="text" id="campoAutocompletado">
<div id="listaSugerencias" class="sugerencias"></div>

CSS (opcional para mejorar la apariencia):

.sugerencias div {
    cursor: pointer;
    padding: 5px;
    margin-top: 1px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;
}

.sugerencias div:hover {
    background-color: #e9e9e9;
}

JavaScript:

function crearAutocompletado(input, sugerencias) {
    const listaSugerencias = document.getElementById('listaSugerencias');

    input.addEventListener('input', () => {
        const entrada = input.value.toLowerCase();
        listaSugerencias.innerHTML = ''; // Limpiar sugerencias anteriores
        if (!entrada) return;

        sugerencias.forEach(sugerencia => {
            if (sugerencia.toLowerCase().startsWith(entrada)) {
                const elementoSugerencia = document.createElement('div');
                elementoSugerencia.textContent = sugerencia;
                elementoSugerencia.addEventListener('click', () => {
                    input.value = sugerencia;
                    listaSugerencias.innerHTML = ''; // Limpiar sugerencias después de seleccionar
                });
                listaSugerencias.appendChild(elementoSugerencia);
            }
        });
    });

    // Opcional: cerrar la lista de sugerencias al hacer clic fuera
    document.addEventListener('click', (e) => {
        if (e.target !== input) {
            listaSugerencias.innerHTML = '';
        }
    });
}

// Ejemplo de uso
const sugerencias = ['Apple', 'Banana', 'Orange', 'Mango', 'Pear', 'Peach'];
const campoAutocompletado = document.getElementById('campoAutocompletado');
crearAutocompletado(campoAutocompletado, sugerencias);

• Se define una función crearAutocompletado que asocia un evento input al campo de texto. Este evento se dispara cada vez que el usuario escribe en el campo.

• Cuando se escribe, la función limpia cualquier sugerencia previa y verifica si hay una entrada actual. Si no hay entrada, no hace nada para evitar mostrar sugerencias innecesarias.

• Luego, filtra las sugerencias basadas en la entrada del usuario, creando un nuevo div para cada sugerencia que coincida y lo añade a listaSugerencias.

• Cada div de sugerencia tiene un evento click asociado que establece el valor del campo de entrada al valor de la sugerencia y limpia la lista de sugerencias.

• Se agrega un manejador de evento al documento para cerrar la lista de sugerencias si se hace clic fuera del campo de entrada.

Este enfoque ofrece una solución básica pero funcional para implementar un componente de autocompletado.

CHALLENGE DE HOY ⚔️ 
Implementar un Mini-Framework de Componentes Reutilizables

Los frameworks modernos de JavaScript, como React, Vue, y Angular, ofrecen sistemas robustos para construir aplicaciones web mediante componentes reutilizables. Tu tarea es implementar una versión simplificada de este concepto, permitiendo definir componentes con su propio estado y lógica que se pueden montar en el DOM.

1. Implementa una función crearComponente que permita definir un componente. Cada componente debe tener:

   • Un template HTML como string.

   • Un objeto estado para mantener sus datos internos.

   • Funciones para manipular este estado.

2. Asegúrate de que el componente se pueda montar en un elemento contenedor especificado y que su contenido se actualice en el DOM cuando su estado cambie.

3. Proporciona una forma de registrar eventos directamente en el template del componente, por ejemplo, para manejar clics de botón.

Ejemplo de uso:

const contadorComponente = crearComponente({
  template: `
    <div>
      <p>Contador: {{ contador }}</p>
      <button id="incrementar">Incrementar</button>
    </div>
  `,
  estado: {
    contador: 0
  },
  methods: {
    incrementar() {
      this.estado.contador++;
      this.actualizar();
    }
  }
});

contadorComponente.montar(document.getElementById('app'));

Código Base:

function crearComponente({ template, estado, methods }) {
    // Implementación del componente aquí
}

// Función para montar el componente en el DOM

• Utiliza expresiones regulares para analizar y reemplazar variables en el template por sus valores correspondientes en el estado del componente.

• Considera cómo implementar la reactividad para que el componente se actualice automáticamente cuando su estado cambie.

• Reflexiona sobre cómo asociar eventos del DOM a funciones definidas en el componente.

Este desafío evalúa tu capacidad para trabajar con conceptos avanzados de JavaScript, manipulación del DOM, y patrones de diseño de software, proporcionando una base sólida para entender cómo funcionan los frameworks modernos de desarrollo frontend.

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 👀