frontenderos icon

Podcast

Newsletter

#206 Onboarding roulette

Estilos de CSS para botones que quizás no conocías

Onboarding roulette

London Water GIF by M Huncho

No lo intentes en el trabajo, a menos que tu trabajo este preparado para cosas chidas, pero siendo honestos pocos trabajos están preparados para este nivel de locura 🤪 Los compas de Graphite, la popular herramienta para supervisar PRs, tienen una dinámica en la que eliminan cuentas de sus trabajadores de forma aleatoria y después esos usuarios tienen que volver a ser dados de alta con todos los privilegios que corresponden para poder asegurar que el onboarding de nuevos empleados sea tan fácil como se puede esperar. Ahora, como dijimos arriba, no cualquier empresa esta preparada para esto, por eso proponemos un ejercicio más sencillo, una ruleta de eliminar usuarios en x proyecto, en testing obviamente, y tener que automatizar volver a crearlos, automatizando se aprende mucho de sistemas, por ejemplo, que tan resilientes son.

EL RINCÓN DE CSS 👨‍💻 
Estilos de CSS para botones que quizás no conocías

Todos conocemos las reglas más comunes para estilizar botones cambiando el display, tamaños, posicionamiento, bordes y colores, pero hay mas reglas CSS que puedes utilizar y en este artículo las aprenderás.

GUÍA 📖 
Next.js usando Prisma y SQLite

¿Por fin te animaste a aprender a utilizar Prisma con Next.js y no sabes por dónde empezar y tienes muchas dudas? No te compliques, puedes partir de utilizar SQLite y seguir este pequeño tutorial para que puedas echar a andar ese proyecto que tanto quieres.

VIDEO 📹️ 
La historia de Astro DB

Astro DB goza de buena popularidad actualmente, y si quieres conocer más del porque, te invitamos a que veas este micro-documental sobre su historia.

HERRAMIENTA 🛠️ 
TanStack Virtual

Si trabajas en un producto o una startup con productos en los que la optimización es clave por la gran cantidad de información que hay que mostrar, entonces tal vez has oido del termino “Listas Virtuales”, porque es una de las opciones más comunes para optimizar. A veces puedes utilizar bibliotecas y a veces puedes crear tus propios componentes dependiendo de las caracterÍsticas que tengas que soportar. Si necesitas alguna biblioteca con multiples opciones para que solo configures y pongas tu información ahí, tienes que probar esta.

Eta

Cuando Node salió, los template engine proliferaron, pero en tiempos recientes no ha habido nuevas e interesantes opciones, hasta ahora. Eta, es un template engine escrito en TypeScript y con soporte para Node y Deno, cuya sintaxis es muy similar a EJS, por si alguna vez lo llegaste a usar y te llega la nostalgia.

LANZAMIENTO 🚀 
Preact 10.20.0

Quien dice que Preact esta muerto, te miente. La popular y liviana biblioteca alternativa a React sigue sacando actualizaciones, aunque menores, porque lo que ya funciona no necesita tantos aditamentos, y aunque esta versión solo trae nuevo soporte para useMemo, aun así es genial que siga estando actualizada.

UN DÍA COMO HOY 🗓️ 

El 04 de abril 1994, Marc Andreessen y James “Jim” Clark fundan la empresa Mosaic Communications Corporation (MCC). Días antes, el 25 de marzo de 1994,  Andreessen y Clark habían acordado desarrollar el navegador web Mosaic como un producto comercial.

El 13 de octubre de 1994, se libera la primera versión de Mosaic. La cual fue una descarga gratuita.

El 14 de noviembre de 1994, la compañía cambia su nombre a “Corporación Netscape Communications” y el nombre del navegador a "Netscape Navigator". En 1995, Netscape era utilizado por cerca del 90% de los usuarios. Pero su supremacía duró poco.

El éxito de Netscape llamó la atención de Microsoft que reconoció el potencial de la empresa y del negocio y decidió ponerse al frente de la revolución de Internet.

Microsoft licenció el código fuente de Mosaic y lo convirtió en Internet Explorer. Al final Microsoft gana la batalla y en 1999 Netscape fue adquirido por AOL por 4.2 millardos de dólares.

VACANTE 💼 
Hubspot Front-end Developer

Ubicación: Ámerica Latina (Remoto)
Empresa: Rankmi
Requisitos: Licenciatura, preferiblemente en un campo relacionado (computación, informática, etc.). Gestión de proyectos, incluida la capacidad de priorizar y equilibrar múltiples proyectos con plazos competitivos. Conocimiento en herramientas de gestión de proyectos como Monday, Trello. Conocimiento en Adobe Creative Cloud (Photoshop, Illustrator y XD). Fuerte conocimiento de análisis digital para medir el performance de web site, mejoras del speed, mejores prácticas de diseño de la página, entre otros. Conocimientos de HTML5, CSS, JavaScript, JSON, XML, HubL, Hubspot CMS, API, entre otros. Conocimiento de configuración de plataforma de análisis cómo por ejemplo (Google Analytics, Google Search Console, administrador de eventos de Meta, entre otros).
Beneficios: Blended Working: Nuestro modelo de trabajo es híbrido en las oficinas de Chile, Perú y México. Días de vacaciones adicionales para desconectarte y recargar energías. Día libre para mudanza. Medio día libre en tu cumpleaños, en el de tus hijos/as, y/o cónyuge. Permiso de postnatal adicional para padres. Bonos por diversas ocasiones: programa de referidos, matrimonio/unión civil, nacimiento de hijo/as. Dress code relajado. Trabajo con metodologías ágiles y equipos multidisciplinarios. Ambiente relajado y multicultural. Entre otros.

¿Te interesó esta vacante? ¡Anímate y postúlate! 🤞 

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

Para encontrar el primer caracter no repetido en un string y considerando la sensibilidad a mayúsculas y minúsculas, puedes utilizar un enfoque que primero cuenta la frecuencia de cada carácter y luego busca el primer carácter con una frecuencia de 1. Aquí te muestro cómo podrías hacerlo:

function primerCaracterUnico(str) {
    const frecuencias = {};

    // Contar la frecuencia de cada carácter en el string
    for (const caracter of str) {
        if (frecuencias[caracter] !== undefined) {
            frecuencias[caracter]++;
        } else {
            frecuencias[caracter] = 1;
        }
    }

    // Buscar el primer carácter con una frecuencia de 1
    for (const caracter of str) {
        if (frecuencias[caracter] === 1) {
            return caracter;
        }
    }

    // Retornar null si no se encuentra ningún carácter único
    return null;
}

// Ejemplo de uso
console.log(primerCaracterUnico("programar es genial")); // Debería retornar "p"
console.log(primerCaracterUnico("abba")); // Debería retornar null
console.log(primerCaracterUnico("")); // Debería retornar null
  • La función primerCaracterUnico toma un string str como argumento.

  • Se utiliza un objeto frecuencias para mantener un registro de la frecuencia de cada carácter en el string.

  • El primer bucle for itera a través de cada carácter en str, contando y actualizando su frecuencia en el objeto frecuencias.

  • El segundo bucle for itera nuevamente a través de los caracteres del string str, pero esta vez busca el primer carácter cuya frecuencia en frecuencias sea exactamente 1. Si se encuentra tal carácter, se retorna inmediatamente.

  • Si el bucle termina sin encontrar un carácter con frecuencia de 1, se retorna null, indicando que no hay caracteres únicos en el string.

CHALLENGE DE HOY ⚔️ 
Convertir Snake_case a CamelCase

Los nombres de variables en JavaScript y muchos otros lenguajes de programación a menudo siguen el formato CamelCase, donde la primera letra de cada palabra, excepto la primera, es mayúscula, sin espacios. Tu tarea es desarrollar una función que tome un string en formato snake_case (palabras en minúsculas separadas por guiones bajos) y lo convierta a CamelCase.

Tareas a realizar:

  1. Implementa una función snakeACamel que acepte un string en formato snake_case como argumento.

  2. La función debe convertir y retornar el string en formato CamelCase.

  3. Asegúrate de que la primera letra del string resultante esté en minúsculas, siguiendo la convención de CamelCase.

Ejemplo de uso:

console.log(snakeACamel("esta_es_una_variable")); // Debería retornar "estaEsUnaVariable"
console.log(snakeACamel("hola_mundo")); // Debería retornar "holaMundo"

• Considera usar el método split para dividir el string en palabras basándote en los guiones bajos.

• Luego, puedes usar map para capitalizar la primera letra de cada palabra, excepto la primera.

• Finalmente, usa join para unir todas las palabras en un solo string en formato CamelCase.

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 👀

¿Qué te pareció el email de hoy?

Iniciar Sesión o Suscríbete para participar en las encuestas.

¡Hasta mañana! 🤟