#213 No hay una ley europea que banea cookies

No hay una ley europea que banea cookies

¡Hemos sido engañados! O algo así. Ese modal que sale en cada sitio web en la actualidad, en realidad pudiera no tener razón de existir y todo ha sido una confusión, o quizás un malentendido de la ley que llevó a esta psicosis colectiva, pero todo esto tiene que parar. Lee el siguiente artículo y coméntanos que piensas.

Mitos sobre la accesibilidad

Alrededor del 15% de la población mundial, vive con una discapacidad; eso es más o menos mil millones de personas. ¿Y por qué te queremos compartir esto?, porque este es uno de los mitos más comunes sobre porque la accesibilidad no importa, porque dicen que es un grupo pequeño. La ultima vez que checamos mil millones de personas (y el número sigue aumentando) no es un número pequeño. Si quieres conocer más mitos, entra y comparte el siguiente sitio web.

Herramientas de performance en 2024 y más allá

¿Cuál es el status de las herramientas que Google Chrome tiene para auditar el performance de sitios y aplicaciones web? En este artículo lo descubrirás. Spoiler alert, Lighthouse esta aquí para quedarse.

EL RINCÓN DE CSS 👨‍💻 
Una fórmula para fuentes web responsivas

Checa este pequeño hack sobre cómo hacer fuentes web responsivas, que te va a ser muy útil. Si bien no tienes que seguirlo al pie de la letra para tus proyectos, te puede dar esa perspectiva que buscabas.

HERRAMIENTA 🛠️ 
React JSON View Lite

Esta biblioteca es un pequeño componente para mostrar información JSON como un árbol, y aunque no tiene muchas características, esta diseñado para trabajar con archivos grandes.

css2wind

¿Frontendero de la vieja escuela que esta transicionando a este mundo donde todo es tailwind? Si tienes la necesidad de saber como se escribe una regla CSS en TailwindCSS, te tenemos un link que te va a servir, compárteselo a quien mas veas desesperado. Aunque para usarla primero necesites saber usar CSS. 🤪

NOTICIA 📰 
React Flow v12

React Flow v12 ya está a punto de salir, pero no sin antes escuchar tu feedback, así que, si eres usuario de esta popular herramienta para construir diagramas interactivos, dale una calada instalando npm install @xyflow/react y probando todas las nuevas características que tienen desde la versión 11. Y si encuentras cualquier bug, no dudes en enviar tu feedback.

UN DÍA COMO HOY 🗓️ 

El 12 de abril de 1976, Ronald Wayne, uno de los tres cofundadores de Apple Computer, abandona la compañía a sólo once días de haberse creado la empresa, renunció a su 10% de cuota por US$800.

En su corto tiempo de trabajo con los cofundadores, Steve Jobs y Steve Wozniak, Wayne ilustró el primer logotipo de Apple, escribió el acuerdo de asociación de la compañía, y escribió el manual del Apple I.

Ronald Wayne decide dejar Apple porque el contrato de sociedad de Apple establecía responsabilidad personal ilimitada de los tres cofundadores, con independencia de qué socio produjera la deuda.

Como Jobs ni tampoco Wozniak eran económicamente solventes, Wayne temió que todas las deudas recayeran sobre él así que prefirió salir de esta empresa de la cual "tampoco veía muchas posibilidades de éxito".

Seis años después (1982), el 10% de Apple Computer tendría un valor de US$1500 millones.

VACANTE 💼 
Full Stack Software Engineer

Ubicación: Guadalajara,Jalisco (Remoto)
Empresa: Atrato
Requisitos: Licenciatura en Ciencias de la Computación o carrera afín. Más de 3 años de experiencia en desarrollo de software full stack. Experiencia con (mySQL, Express, React, Node.js) o pilas de aplicaciones web similares. Dominio de frameworks de desarrollo front-end, especialmente React con TypeScript. Experiencia en la creación y mantenimiento de API RESTful utilizando Node.js con TypeScript. Fuerte conocimiento de tecnologías de bases de datos como MySQL. Fuertes habilidades analíticas y de resolución de problemas. Capacidad para trabajar de forma independiente y como parte de un equipo en un entorno acelerado.
Beneficios: 💻 Trabajo totalmente remoto + equipo de trabajo 🏥 Seguro médic 📈 Posibilidad de obtener opciones sobre acciones según su desempeño🏝 Entras con 15 días de vacaciones y aumenta año tras año (según políticas internas) ✅ Hasta 18 meses de compras sin intereses en cualquiera de nuestros comercios afiliados⏱️ Trabajo basado en objetivos.

¿Te agradó esta vacante? ¡Postúlate! Aquí te dejamos el link. 🤞 

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

Para crear un menú desplegable responsivo que se adapte a diferentes tamaños de pantalla, transformándose en un menú de hamburguesa en dispositivos móviles, puedes seguir estos pasos utilizando HTML y CSS, incluyendo media queries para gestionar el comportamiento responsivo. Aquí tienes cómo podrías implementarlo:

/* Estilos base para el menú */
.menu-navegacion {
display: block;
background-color: #333;
padding: 10px 0;
color: white;
text-align: center;
}

.menu-navegacion a {
color: white;
text-decoration: none;
padding: 10px 15px;
display: inline-block;
}

/* Estilo para el checkbox y la etiqueta del menú de hamburguesa */
#toggle,
#toggle:checked + .menu {
display: none;
}

label[for="toggle"] {
display: none;
cursor: pointer;
padding: 10px 15px;
background-color: #333;
color: white;
}

/* Responsividad */
@media (max-width: 768px) {
/* Muestra el icono de hamburguesa en pantallas pequeñas */
label[for="toggle"] {
display: block;
}

/* Estilos para el menú cuando el checkbox está activado */
#toggle:checked + .menu {
    display: block;
    text-align: center;
}

/* Cambiar la disposición del menú para que aparezca en forma vertical */
.menu {
    display: none;
    width: 100%;
    text-align: center;
}

.menu a {
    display: block;
    padding: 10px;
    border-top: 1px solid #444; /* Agrega una línea sutil entre enlaces */
}

/* Estilos para pantallas grandes: menú horizontal */
@media (min-width: 769px) {
.menu {
display: block;
}

.menu a {
    padding: 10px 20px;
}

label[for="toggle"],
#toggle {
    display: none; /* Oculta el toggle en pantallas grandes */
}

- Los estilos base configuran el color de fondo, el padding, y el color de texto para el menú. Los enlaces (`a`) tienen un color y padding específico, y se muestran en línea. - El checkbox y su etiqueta asociada se usan para controlar el despliegue del menú en modo de hamburguesa. Inicialmente, ambos están ocultos. - En pantallas pequeñas (menos de 768px de ancho), el label para el checkbox se muestra, permitiendo al usuario abrir y cerrar el menú. Cuando el checkbox está marcado, el menú se expande en formato vertical y cada enlace se muestra en bloque con una línea divisoria. - En pantallas grandes, el menú se muestra siempre en formato horizontal, y el sistema de menú de hamburguesa se oculta.

CHALLENGE DE HOY ⚔️ 
Implementar un Algoritmo de Ordenamiento

El ordenamiento por inserción es un algoritmo simple y eficiente para ordenar una pequeña cantidad de elementos. Funciona de manera similar a como ordenarías las cartas en tus manos en un juego de cartas. Tu tarea es desarrollar una función que tome un array de números y lo ordene en orden ascendente usando el algoritmo de ordenamiento por inserción.

Tareas a realizar:

1. Implementa una función ordenamientoPorInsercion que acepte un array de enteros como argumento.

2. La función debe modificar el array original ordenándolo de menor a mayor utilizando el algoritmo de ordenamiento por inserción.

3. Retorna el array ordenado.

Ejemplo de uso:

console.log(ordenamientoPorInsercion([6, 1, 8, 4, 5])); // Debería retornar [1, 4, 5, 6, 8]
console.log(ordenamientoPorInsercion([12, 11, 13, 5, 6])); // Debería retornar [5, 6, 11, 12, 13]

• Comienza iterando desde el segundo elemento del array, ya que el primer elemento se considera ya ordenado.

• Para cada elemento, compara hacia atrás con los elementos anteriores y desplázalos hacia adelante si son mayores que el elemento que estás intentando ordenar.

• Inserta el elemento actual en la posición correcta.

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 👀