frontenderos icon

Podcast

Newsletter

#163 Arregla Next.js routing para tener type-safety

Sidenotes en Diseño Web

Arregla Next.js routing para tener type-safety

De nada sirve que tus vistas y componentes sean a pruebas de errores de ejecución si no aplicas las mejores prácticas para las rutas. Utilizando zod y query-string podrás tener más seguridad en este tema.

Sidenotes en Diseño Web

animation design GIF by LooseKeys

Las notas de página sirven para hacer más fácil la lectura y son una de las características menos utilizadas en Blogs y sitios webs que tienen artículos. Entre las ventajas de implementarlas están mejorar la usabilidad y la accesibilidad, además de que puedes mejorar el SEO. En este articulo, se discuten varios diseños y enfoques que tú también puedes implementar para tus proyectos personales o en el trabajo.

Sobredosis de useMemo

useMemo es genial para optimizar componentes en React, pero usarlo en cada componente, puede tener sus desventajas, como side effects que sean difíciles de administrar o demasiada complejidad en tu código. Si lo estas usando para todo, considera leer este articulo.

HERRAMIENTA 🛠️ 
gql.tada

Cuando estas trabajando con TypeScript y GraphQL, y no tienes las correctas herramientas, las cosas se pueden poner mal muy rápido. Este proyecto nace como respuesta a una pregunta que el equipo creador se hizo: ¿Por qué no podemos hacer que TypeScript entienda GraphQL? Y encontraron la respuesta creando una biblioteca para el runtime API, así como un Language Service para Visual Studio Code, para ayudarte a hacer la inferencia de types en tiempo real.

EL RINCÓN DE CSS 👨‍💻 
Un componente switch con técnicas CSS modernas

Algún día tendremos un input[type="switch"] y dejaremos de usar input[type="checkbox"] para este tipo de input que se siente más nativo, pero mientras ese día llega puedes modernizar tus inputs con estas técnicas de css moderno.

EL RINCÓN DEL DISEÑADOR 🎨 
En memoria del checkbox cuadrado

Hay una razón de peso para que el checkbox sea cuadrado y el radio sea circular, pero en algún momento en la historia, las cosas comenzaron a cambiar y ahora hay anarquía en el mundo del diseño web.

INISPIRACIÓN 💡 
Soy un creativo

Art Fun GIF by Geo Law

El padrino de la Web, Jeffrey Zeldman, escribió un ensayo sobre creatividad y humanidad, que es más bien, un manifiesto y también un rant, y tienes que leerlo.

NOTICIA 📰 
La FTC advierte sobre los cambios en Términos y Condiciones

La FTC, es una agencia federal de Estados Unidos para proteger al consumidor, que tiene jurisdicción en temas digitales, entre otros. Esta agencia, esta preocupada por la reciente oleada de cambios en los Términos y Condiciones de muchos servicios y productos de compañías que permitirían a estos vender tu información generada en estas plataformas a terceros para modelado de datos por herramientas de AI, como Adobe ha estado haciendo, por ejemplo. Veremos si de la advertencia se pasa a algo más o que sucede.

UN DÍA COMO HOY 🗓️ 

El 21 de febrero de 1995, la Corte Suprema de los Estados Unidos niega la apelación final de Apple en el caso de Apple Computer, Inc. contra Microsoft Corporation.

Apple alegaba que Microsoft había cometido infracción de derechos de autor al replicar la interfaz gráfica de Macintosh en el sistema operativo Windows.

Con esta decisión se pone fin a siete años de lucha legal. La demanda fue presentada originalmente por Apple el 17 de marzo 1988.

VACANTE 💼 
Web Developer - Remote, Full-Time

Ubicación: Juárez, Chihuahua (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. Capacidad para asumir un control extremo de su trabajo. Cada día es un desafío para garantizar que usted está cumpliendo con las expectativas que usted y su equipo acordaron, tanto en lo que respecta a las estimaciones como al proceso general. 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.

Para 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 eliminarDuplicados(array) {
    // Utilizar Set para eliminar duplicados y luego convertirlo de nuevo a Array
    const unicos = [...new Set(array)];
    return unicos;
}

// Ejemplo de uso
console.log(eliminarDuplicados([1, 2, 2, 3, 4, 4])); // Debería retornar [1, 2, 3, 4]
console.log(eliminarDuplicados(["apple", "banana", "apple", "orange"])); // Debería retornar ["apple", "banana", "orange"]
  • La función eliminarDuplicados toma un array como argumento.

  • Dentro de la función, se crea un Set a partir del array original. El Set automáticamente elimina cualquier valor duplicado, ya que solo puede contener valores únicos.

  • Se utiliza el operador de propagación ... para convertir el Set de vuelta a un array.

  • Finalmente, la función retorna el nuevo array con elementos únicos.

CHALLENGE DE HOY ⚔️ 
Crea una función en JavaScript que, dados dos arrays, devuelva un nuevo array que contenga solo los elementos comunes a ambos arrays (la intersección).

  1. Implementa una función encontrarInterseccion que acepte dos arrays como argumentos.

  2. La función debe retornar un nuevo array que contenga solo los elementos que están presentes en ambos arrays de entrada.

  3. Asegúrate de que el array resultante no contenga duplicados.

Ejemplo de uso:

console.log(encontrarInterseccion([1, 2, 3, 4], [3, 4, 5, 6])); // Debería retornar [3, 4]

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