#200 JAMStack vs WordPress

Como funciona HEAD en git

Paola de Frontenderos
March 29, 2024

JAMStack vs WordPress

Hubo otro tiempo en el que se pensaba que las bibliotecas y frameworks que conformaban iban a hacerle guerra a WordPress. Y luego el sueño terminó y JAMStack murió, y aunque lo quieren revivir, va a ser mas indie que nunca. Pero como sabemos que las noticias de tecnología en México y LATAM llegan tarde, sobre todo para la gente que toma las decisiones de negocio aka los jefes, puede que algún día te toque hacer un proyecto JAMStack y le tengas que compartir este documento a esa persona que pone el dinero.

Como funciona HEAD en git

Julia Evans continua compartiendo con el mundo todo lo que sus investigaciones y experimentos en Git le han enseñado, y en este caso nos trae un artículo que más de uno va a agradecer para tener mas claro como funciona una de las características mas importantes de Git.

VIDEO 📹️
La importancia del desempeño web para la equidad en la información

Cuando decimos que el desempeño importa al momento de realizar proyectos web, no es por soberbia ni por elitismo, es porque aun hay sitios web ahi afuera que consisten en entregar información en lugares del mundo donde acceder a esta es muy costoso y ademas vital para sus actividades personales y laborales diarias. Por eso el desempeño importa.

GUÍA 📖
Capo.js, una forma de mejorar el desempeño web

A veces, lo que traemos en la cabeza nos detiene, nos pasa a nosotros y le pasa a la Web, pero con esta herramienta vas a poder ver si puedes mejorar el desempeño en tu sitio reordenando los elementos en el <head> Tan simple pero efectivo.

EL RINCÓN DE CSS 👨‍💻
Crear paletas de colores con la funcion color-mix()

Este es un sueño hecho realidad para cualquier persona que siempre quizo tomar dos colores y mezclarlos para obtener un nuevo color. Las aplicaciones son infinitas, solo piensa que puedes hacer con esto y compártenoslo.

HERRAMIENTA 🛠️
Mantine React Table

¿Qué pasa si se unen TanStack Table y Mantine UI? Nace Mantine React Table, un componente de Data Grid tan potente y tan bello que debes ponerlo hasta arriba en la lista de este tipo de componentes. Es tal el alcance de este proyecto, que hasta hay una tabla comparativa con las opciones más populares en el mercado sobre las ventajas y desventajas de este proyecto, y eso esta chido.

JSON Canvas

¿Has utilizado herramientas como Miro para realizar mapas conceptuales? Alguna vez algún cliente o jefe te ha dicho, quiero algo así pero cóbrame barato. No le cobres barato, pero si puedes realizar un proyecto con esas características utilizando JSON Canvas, un proyecto creado por Obsidian y que ahora es Open Source.

UN DÍA COMO HOY 🗓️

El 29 de marzo de 1983, Radio Shack lanza el TRS 80 100 uno de los primeros ordenadores estilo notebook del mercado.
Fue hecho por Kyocera y fue vendido en Japòn como el Kyotronic 85.
Aunque hecho por Kyocera, los derechos de la máquina fueron comprados por Tandy Corporation y el computador fue vendido a través de los almacenes de Radio Shack en los Estados Unidos así como por los distribuidores autorizados afiliados en otros países.
El TRS 80-100 se convirtió en uno de los modelos más populares de la compañía, vendiendo más de 6.000.000 unidades por todo el mundo.
El TRS-80, contaba con un procesador Intel 80C85 2.4MHz, de 8 a 24KB RAM, teclado de 56 teclas , pantalla LCD de 8 línea por 40 columnas, módem de 300 baudios, interfaz de cinta de cassette.
El TRS-80, venía equipado con cinco aplicaciones integradas con 32K de ROM, incluyendo una libreta de direcciones, Microsoft BASIC, paquete de telecomunicaciones y un editor de texto.

VACANTE 💼
Front-end Developer Vue.js

Ubicación: Ámerica Latina (Remoto)
Empresa: Alegra
Requisitos: Destreza y experiencia en el uso de Vue.js. Experiencia y conocimientos con las siguientes tecnologías: Webpack, TypeScript, Npm, Vuex, JWT. Aplicación de manera sólida los conceptos claves de Javascript, HTML5, CSS. Experiencia y conocimientos en el desarrollo de Single Page Applications. Aprendizaje como estilo de vida. Pasión por la calidad de tu código y buenas prácticas. Entre otros.
Beneficios: Trabajar desde donde quieras 100% remoto, haciendo lo que amas. Una relación laboral estable y a largo plazo , ¡no freelance! Un salario competitivo. Compartir con un talento que trasciende fronteras. Espacios para socializar y compartir gustos. Un ambiente para experimentar, aprender de los errores y trabajar con autonomía pero con mucho compromiso y responsabilidad. Convertir la lectura en tu mejor aliada para aprender, con acceso a plataformas educativas, cursos con certificaciones, capacitaciones y una biblioteca virtual. Entre otros.

Para conocer más de esta vacante, entra aquí. 🤞

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

Para rotar un array hacia la derecha n veces, puedes utilizar un enfoque directo que manipule los elementos del array para lograr el resultado deseado. Una manera eficiente de hacerlo es utilizando el método splice junto con slice para extraer y mover las partes del array.

function rotarArray(array, n) {
    // Ajustar n para evitar rotaciones innecesarias si n es mayor que la longitud del array
    n = n % array.length;

    // Extraer los últimos n elementos
    let parteFinal = array.slice(-n);

    // Extraer el inicio del array hasta el punto de corte
    let parteInicio = array.slice(0, array.length - n);

    // Concatenar las partes en el orden inverso para lograr la rotación
    return parteFinal.concat(parteInicio);
}

// Ejemplo de uso
console.log(rotarArray([1, 2, 3, 4, 5], 2)); // Debería retornar [4, 5, 1, 2, 3]
console.log(rotarArray(['a', 'b', 'c', 'd'], 3)); // Debería retornar ['b', 'c', 'd', 'a']

Primero, se ajusta el número de rotaciones n para que no exceda la longitud del array. Esto se hace con n = n % array.length, lo cual es especialmente útil cuando n es mayor que la longitud del array, permitiendo que el proceso sea más eficiente al eliminar rotaciones redundantes.
Luego, se utiliza slice(-n) para obtener los últimos n elementos del array, que serán movidos al principio del array resultante.
Para los elementos restantes, se utiliza slice(0, array.length - n) para obtener el segmento del array que quedará después de los elementos rotados.
Finalmente, se utiliza concat para unir los últimos n elementos con el segmento restante del array, formando así el array rotado.
Este enfoque asegura que el array original no se modifique y proporciona el resultado esperado para la rotación de arrays hacia la derecha.

CHALLENGE DE HOY ⚔️
Contar las Islas en una Matriz Se te da una matriz bidimensional que representa un mapa donde 1 representa tierra y 0 representa agua. Tu tarea es calcular cuántas islas hay en el mapa.

Implementa una función contarIslas que acepte una matriz bidimensional de enteros como argumento.
La función debe retornar el número total de islas encontradas en la matriz.
Asegúrate de no contar dos veces la misma isla y de considerar solo las conexiones horizontales y verticales (no diagonales).

const matriz = [
  [1, 1, 0, 0, 0],
  [0, 1, 0, 0, 1],
  [1, 0, 0, 1, 1],
  [0, 0, 0, 0, 0],
  [1, 0, 1, 0, 1]
];
console.log(contarIslas(matriz)); // Debería retornar 6

Considera utilizar una búsqueda en profundidad (DFS) para explorar cada elemento 1 y marcar todos los 1s conectados como visitados para no contar la misma isla más de una vez.
Puedes modificar la matriz original para marcar los 1s visitados o utilizar una matriz adicional para llevar un registro de los visitados.

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