frontenderos icon

Podcast

Newsletter

#158 Parece que React esta recibiendo muchas criticas ultimamente

Como añadir un editor WYSIWYG con AI usando React y Astro

Parece que React esta recibiendo muchas criticas últimamente

What The Wtf GIF by DeeFee Productions

Cada tecnología tiene sus altas y bajas en popularidad y parece que React esta pasando un bache en estos momentos, pero aunque haya cada vez más ruido en cuanto a usar alternativas o simplemente no usar bibliotecas y frameworks tan grandes, hay una cosa segura, utilizar una biblioteca como React, o un framework como Next.js, es una inversión a diferentes tiempos, y si tu estas en posición de poder en tu empresa deberías estar constantemente evaluando su uso. Y si al contrario, no tienes tanto poder de decisión y esa llamada ya la hizo alguién más, solo queda mantenerte actualizado e informado con El diario del Frontend, traído a ti por Frontenderos.

Como añadir un editor WYSIWYG con AI usando React y Astro

Tarde o temprano íbamos a tener la opción de tener un editor WYSIWYG con AI en nuestras manos de programadores, y el momento ha llegado. Novel es una biblioteca que funciona sobre la API de OpenAI, entonces vas a tener que conectar tu cuenta si quieres probarla. Y ofrece no solo texto predictivo, sino poder utilizar comandos. Realmente una idea y una herramienta que valen la pena explorar.

HERRAMIENTA 🛠️ 
TypeSpec

TypeSpec, es una herramienta para generar APIs, esquemas de bases de datos, documentación y más, describiéndolas con un lenguaje de pseudocódigo. Lo mejor es el gran soporte de bibliotecas que tiene y la extensa biblioteca de APIs y Types que usa. Si te la pasas generando APIs o trabajando con bases de datos, esta herramienta es para ti.

Pretty Quick

Si quieres una biblioteca que te permita correr cambios de prettier rápida, esta opción te puede servir. Tal vez ya la conoces, o tal vez no, pero si no, te la recomendamos.

EL RINCÓN DEL CMS 👩‍💻 
PayloadCMS

A veces, damos por sentado que las personas que nos contratan, de ahora en adelante les llamaremos Cliente, son personas que saben lo que quieren y que son personas que saben cómo funciona la Web. Y una de estas ideas equivocadas es sobre como se va a actualizar un sitio web. En la mayoría de los casos necesitas un CMS o un conjunto de CMS para que puedas dar a elegir dependiendo del tipo de cliente o de cuánto están dispuestos a invertir en tiempo y dinero. Y una de esas recomendaciones, es Payload, por su sencillez, número de tipos de datos que soporta y porque esta construido con TypeScript y eso es importante en una herramienta que será usada por usuarios que a veces querrán meter tipos de datos donde no van.

NOTICIA 📰 
Expo Router v3

Hace unos números, te contábamos de que la beta de la v3 de Expo Router, estaba en beta, y ahora ya es oficial su lanzamiento. Los cambios en la nueva versión incluyen: API Routes, Bundle splitting, mejoras de velocidad, soporte para testing con Jest, y props como los de <Link> en Web.

Actualizaciones de seguridad de Node.js

Si eres frontendero en un gran equipo, lo más probable es que tengan buenas políticas de actualización y seguridad para sus ambientes en la nube, pero si estas en un equipo de 1, quizás tú seas el que tiene que actualizar Ubuntu manualmente. Estas actualizaciones que acaban de sacar esta semana afectan las versiones 18, 20 y 21 y son muy graves, por eso es importante que actualices o le cuentes a quien más confianza le tengas para que actualice.

INISPIRACIÓN 💡 
Elogiando a los botones

Olvida que sabes qué es un botón en diseño web. ¿Ya lo olvidaste? Ahora entra a un sitio web y sorpréndete de que el más básico y omnipresente elemento de control que podemos encontrar en la Web, es precisamente un botón. Y muchas veces los damos por sentado (al igual que los links) hay una mística y sobre todo un proceso para hacer que los botones sean lo que son ahora y este articulo da una buena visión sobre ello.

UN DÍA COMO HOY 🗓️ 

El 16 de febrero de 2005, Anthony Greco, de 18 años, se convierte en la primera persona en ser arrestada por enviar anuncios no solicitados a través de mensajes instantáneos, conocidos como "spim".

Greco es detenido en el aeropuerto internacional de Los Ángeles después de haber sido atraídos desde Nueva York a Los Angeles con el pretexto de una reunión de negocios por la policía.

Greco fue acusado de haber enviado pornografía, 1,5 millones de mensajes de publicidad por sms y amenazar con compartir su método para el envío de spim con el público, si MySpace.com no firmaba un acuerdo de comercialización exclusiva de legitimación de su servicio.

VACANTE 💼 
Hubspot Front-end Developer

Ubicación: América 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). Entre otros.
Beneficios: 🧑🏽‍💻 Modalidad de trabajo híbrida (Chile, Perú, México), aunque además trabajamos de manera remota en toda Latinoamérica. 🏝️ Días de vacaciones adicionales.💸 Bonos por diversas ocasiones (vacaciones, referidos, matrimonio/unión civil, nacimientos, matrícula en marzo).👟 Dress code relajado. 🎂 Medio día libre en tu cumpleaños, para hijos/as y/o cónyuges. 🚛 Día libre para mudanza. 🍼 Permisos postnatal adicionales para padres. Entre otros.

“En Rankmi, no solo somos apasionados por la tecnología, sino que también fomentamos un ambiente alegre y colaborativo. 💪 Apreciamos la innovación y acogemos el ritmo vibrante del cambio, creando un espacio donde cada miembro del equipo tiene un rol valioso en nuestro éxito común.”

Si te interesó esta vacante, puedes aplicar aquí. 🤞 

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

function generarHash(cadena) {
    let hash = 0;
    for (let i = 0; i < cadena.length; i++) {
        const char = cadena.charCodeAt(i);
        hash += char;
    }
    return hash;
}

// Ejemplo de uso
console.log(generarHash("Hola")); // Retorna un valor hash basado en la suma de los códigos de caracteres
console.log(generarHash("Mundo")); // Retorna un valor hash basado en la suma de los códigos de caracteres
  • La función generarHash toma una cadena cadena como argumento.

  • Inicializa una variable hash en 0 para acumular el valor hash.

  • Itera sobre cada carácter de la cadena utilizando un bucle for.

  • Para cada carácter, utiliza charCodeAt(i) para obtener su código de carácter numérico.

  • Suma el código de carácter a hash.

  • Después de iterar sobre todos los caracteres, retorna el valor acumulado en hash como el valor hash de la cadena.

CHALLENGE DE HOY ⚔️ 
Crea una función en JavaScript que, dado un array de objetos y una propiedad clave, agrupe los objetos por el valor de esa propiedad clave.

  1. Implementa una función agruparPorPropiedad que acepte un array de objetos y una cadena que representa la clave de propiedad.

  2. La función debe retornar un objeto donde las claves son valores únicos de la propiedad especificada y los valores son arrays de objetos que corresponden a cada clave.

  3. Asegúrate de incluir todos los objetos del array de entrada en el objeto de salida, agrupados correctamente.

const personas = [
    { nombre: "Alice", edad: 30 },
    { nombre: "Bob", edad: 25 },
    { nombre: "Charlie", edad: 30 }
];

console.log(agruparPorPropiedad(personas, "edad"));
// Debería retornar:
// {
//   "25": [{ nombre: "Bob", edad: 25 }],
//   "30": [{ nombre: "Alice", edad: 30 }, { nombre: "Charlie", edad: 30 }]
// }
  • Puedes utilizar un bucle para iterar sobre el array y construir el objeto de salida.

  • Considera utilizar la propiedad como clave en el objeto de salida y comprobar si ya existe un array para esa clave antes de agregar el objeto actual.

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! 🤟