Forem: Lu

Core Web Vitals - Todo lo que necesitas saber para entenderlas

Lu — Fri, 05 Jan 2024 03:50:45 +0000

🚑 CORE WEB VITALS

💡 ¿Qué son las Web Vitals?

Son una serie de reglas desarrolladas por Google en mayo 2020 que están enfocadas en mejorar la calidad de la experiencia de usuario en un sitio web, estás reglas son aplicadas por Google en todos los sitios web de internet.

En una forma simplificada, es una forma de saber qué factores deben ser optimizados en una página, estos factores comprenden tiempos y/o velocidad de carga, interacción y estabilidad visual.

💡 ¿Por qué son importantes en SEO?

Si bien los Web Vitals no influyen (por ahora) al posicionamiento de nuestro sitio web, se dice que los usuarios que visitan una página optimizada tienen un 24% menos de probabilidades de abandonar el sitio (en otras palabras, mejoraremos el Bounce Rate de nuestro sitio) y un 1% más de convertir.
Siendo la experiencia una objetivo significativo a considerar dentro de las estrategias de SEO Onsite.

💡 ¿Qué métricas hacen parte de las Web Vitals?

Existen 3 métricas Core esenciales: LCP (Largest Contentful paint), FID (First Input Delay) y CLS (Cumulative Layout Shift), sin embargo, dentro del reporte podemos encontrar otra serie de métricas enfocadas en tiempos de carga e interacción de un usuario con nuestro sitio.

Para cada una de estas métricas core, Google recomienda unos umbrales de tiempo y según los resultados de la inspección, cada sitio podrá ser clasificado como “bueno”, “necesita mejoras” o “pobre”.

Esta clasificación la hace usando el percentil 75%. Es decir que el 75% de las visitas a la página o sitio deben alcanzar un umbral “bueno”, por el contrario, si el 25% de las visitas a la página o sitio alcanzan el umbral pobre, el sitio será clasificado con bajo rendimiento

🚥 **LCP (Largest Contentful Paint o procesamiento de imagen con contenido más grande):**

Se encarga de medir la percepción de la velocidad de carga. Es decir, el contenido de mayor tamaño debe verse en este tiempo desde que la página empieza a cargar. Así se da una buena experiencia al usuario.

Los datos de LCP se componen principalmente de los siguientes elementos:

Elementos de imagen
Texto a nivel de bloque
Imágenes de carteles de vídeo
Imágenes de fondo

✅ PUNTUACIÓN DEL CORE: 2.5 segundos o menos

🚥 CLS (Cumulative layout shift o cambio de diseño acumulado).

Se refiere a la estabilidad visual y mide la cantidad de cambios inesperados en el diseño del contenido visible es decir reducir los movimientos inesperados que se producen cuando los elementos como los texto, botones e imágenes, son empujados hacia abajo mientras la página todavía se está cargando. Esto suele provocar frustración porque el usuario puede hacer clic en elementos equivocados por el movimiento.

✅ PUNTUACIÓN DEL CORE: 0.1 segundos o menos

🚥 **FID *(first input delay o retraso de primera entrada):***

Mide el tiempo que se demora la pagina en estar lista para comenzar a interactuar con elementos como: inputs, botones, campos de texto, etc.

Por ejemplo si el javascript del sitio no ha cargado, ningún botón o acción dentro de la pagina podrá ser utilizada.

✅ PUNTUACION DEL CORE: 100 milisegundos o menos.

🚪 Métricas complementarias:

🚥 TTFB - Time to first Byte

The Time to First Byte (TTFB) identifica cuándo tu servidor envía una respuesta al navegador del usuario. Cuanto más tarde el navegador en obtener los datos, más tardará en mostrar tu página.

El TTFB es la suma de estas fases de solicitud:

Tiempo de redirección.
Tiempo de arranque del service worker (si lo hay).
Búsqueda de DNS.
Negociación de la conexión y del Transport Layer Security (TLS).
Solicitud hasta que llega el primer byte de la respuesta.

✅ PUNTUACION DEL CORE: No aplica o no se puede poner un número exacto, ya que depende de variaciones de red.

🚥 FCP- First Contentful Paint

Calcula el tiempo que el navegador tarda en pintar el contenido mas grande above the fold, dentro del modelo de objetos del documento (DOM). Incluye texto, imágenes y lienzos no blancos.

✅ PUNTUACION DEL CORE: 1,8 segundos o menos.

🚥TBT - Total Blocking Time

Total Blocking Time (TBT) es la suma de todo el tiempo en el que una página está bloqueada para responder a la entrada del usuario.

Google calcula el total sumando la parte de bloqueo de las tareas largas de JavaScript entre el FCP y el TTI. Cualquier tarea ejecutada durante más de 50 milisegundos es una tarea larga. El período posterior a los 50 milisegundos es la parte de bloqueo.

✅ PUNTUACION DEL CORE: 200 milisegundos.

🚥 TTI - Time to Interacting

Es el tiempo que necesita una página para ser totalmente interactiva. Google considera que una página es interactiva cuando:

La página muestra contenido utilizable.
La página responde a las interacciones del usuario en 50 milisegundos.
Los propietarios del sitio registran controladores de eventos para los elementos más visibles de la página.

✅ PUNTUACION DEL CORE: 3,8 segundos o menos.

💡¿Cómo interpretar el reporte?

La construcción del reporte será levemente distinta según la herramienta que se use, sin embargo es usual encontrarse con:

🚑 Diagnóstico detallado para 4 categorías:

📉 Performance (Rendimiento): Comprenderá las métricas Core y complementarias.
👩🏻‍🦯 Accessibility (Accesibilidad): Comprenderá detalles sobre ARIA roles, Controles custom y asociación de labels, focus, controladores interactivos y navegabilidad por teclado, controladores interactivos y estado, orden lógico del TAB, bueno uso de elementos de HTML5 y orden visual consistente con el orden del DOM.
📝 Best Practices (Buenas practicas)
📰 [SEO:](https://developers.google.com/search/docs/essentials?visit_id=638107886021732888-3777756873&rd=1) Comprenderá si el contenido es confiable, útil y seguro para el usuario, uso de palabras adecuadas para la búsqueda de los usuarios y uso correcto de ellas dentro del contenido, links rastreables, buenas prácticas sobre contenido como imágenes, videos, datos estructurados y JavaScript.

🚦 Indicadores de 3 colores (tipo semáforo):

🍎 Rojo: Listado de reglas que se deben solucionar y que al hacerlo la puntuación mejorará considerablemente.
🍋 Amarillo: Listado de reglas que se pueden solucionar fácilmente, pero que no asegura mejorar la puntuación de forma significativa.
🥦 Verde: Listados de reglas que ya se cumplen y en las que no es necesario trabajar.

🌲 Treemap:

Esta herramienta será útil en caso de que

Se quiera ver detalladamente un paquete y profundizar en el.
Se quiera visualizar los bytes no utilizados en los archivos JavaScript.
Se quiera ver estadísticas de cobertura detalladas.

🗓️ Datos generales y de ambiente del test:

💡¿Cómo puedo optimizar mi página?

En el detalle de cada una de las 4 categorías del diagnóstico (en el reporte) se encontrará un listado de mejoras y sugerencias:

Se puede desplegar el acordeón para ver el detalle en donde deben hacerse los cambios:

💡¿Cuándo preocuparme?

🖍️ Debemos preocuparnos cuando los indicadores del diagnóstico está en rojo, es decir, pobres.

Solo para los reportes de pagespeed puedes encontrarte con dos tipos de datos:

💡 Datos de campo

Los datos de campo presentados en el informe provienen de los 28 días anteriores y siempre se presentarán con barras de distribución adjuntas. Esto se debe a que «field data» se compone de datos agregados del informe CrUX y la misma página web nunca funciona de la misma manera para todos los usuarios.

💡 Datos de laboratorio

Los datos de laboratorio de PageSpeed Insights de Google incluyen datos sintéticos de la API de Lighthouse. Lighthouse mide Core Web Vitals y tres métricas adicionales.

🧰 Herramientas:

🧮 Calculadora Web Vitals:

Esta herramienta ayudará a conocer los valores ideales para los test.

Lighthouse Scoring calculator

🏎️ Pagespeed:

PageSpeed Insights

👩🏼‍💻 Google Search Console:

Google Search Console

)

🛖 Lighthouse:

Esta disponible en las web tools del navegador.

Otros recursos:

- Aprende sobre WAI Aria y aumenta la calidad contextual del contenido y la accesibilidad para la navegación por teclado

🔮 WIKI

Termino	Definición
SEO Onsite o SEO On page	El SEO On Page es aquello cuyas optimizaciones están hechas en la misma dirección de la página web, incluyendo el contenido y la estructura de las páginas. Más allá del contenido generado, tienes que estar bien ubicado en las búsquedas de Google para enfrentar a tu competencia.
SEO Off page	SEO off page es el conjunto de estrategias de optimización que aplicas fuera de tus páginas web. La intención es mostrar cómo otras páginas de Internet ven tu sitio web que, de preferencia, debe ser como una ¡referencia en el mercado!
Above the fold	La expresión “above the fold” define la parte que los usuarios ven primero sin necesidad de desplazarse con el Scroll.💡 Es fundamental evitar la publicidad en esta zona, ya que Google considera que los banners pueden tener un efecto negativo en la usabilidad y la experiencia. Diseños amigables y sencillos. ⏳ En enero de 2012, Google sacó otra actualización de sus algoritmos en la que los sitios web que contenían demasiados banners (“Top Heavy”) en la zona “above the fold” recibieron penalizaciones y bajaron de posicionamiento. ⏳ En octubre de 2012 hubo otra actualización (“Top Heavy 2”). Desde entonces, Google recomienda no posicionar contenido único en la zona inferior de la página ("below the fold"), ya que podría empeorar la experiencia del usuario en el sitio web. Por otra parte, se desaconseja totalmente integrar demasiados anuncios a través de Google AdSense en la zona visible de la página.
Below the fold	Si se desplazan hacia abajo haciendo scroll, esta parte del sitio web se denomina “below the fold”
Crowler	El crawler o araña en SEO es un software o webbot capaz de rastrear todas las páginas web para leerlas, analizarlas y entenderlas con el objetivo de llevar toda la información a un servidor. Es en este servidor donde se le determinará una posición dentro de los resultados de búsqueda o SERP.

💾 Recursos

Tendencias de diseño UX-UI 2024

Lu — Wed, 03 Jan 2024 03:44:20 +0000

Neumorphism

¿Qué es?

Es una tendencia de diseño de interfaz de usuario (UI) que ha ganado popularidad en el campo del diseño de experiencia de usuario (UX). Se caracteriza por la creación de interfaces visuales que imitan la apariencia de objetos físicos mediante el uso de sombras suaves y colores similares al fondo. A diferencia de tendencias anteriores, como el skeuomorfismo y el minimalismo, el neumorfismo busca un equilibrio al proporcionar elementos visuales que parecen integrarse naturalmente en el entorno digital, al tiempo que conservan una estética limpia y moderna.

Caractéristicas:

Se distingue por la aplicación sutil de sombras para simular la profundidad y resaltar los elementos de la interfaz. Este enfoque da la impresión de que los elementos flotan sobre la superficie, creando una apariencia tridimensional y táctil. Los bordes de los elementos adoptan tonos de color similares al fondo, contribuyendo a la sensación de continuidad y suavidad.

Ventajas y Desventajas:

Aunque el neumorfismo busca proporcionar una experiencia visual atractiva y realista, también presenta desafíos en términos de accesibilidad y legibilidad. Dado que la técnica se basa en sutilezas visuales, es esencial equilibrar la estética con la funcionalidad y garantizar que la interfaz sea fácilmente comprensible para todos los usuarios. En general, el neumorfismo representa un enfoque innovador en el diseño de UX al fusionar la estética táctil con la elegancia digital.

Bento:

¿Qué es?

Es un término que indique un enfoque integrado y organizado para el diseño de experiencia de usuario (UX) y diseño de interfaz de usuario (UI), similar a cómo los elementos están organizados en una caja bento.

Ventajas:

Organización Eficiente: Puede conducir a una interfaz ordenada y fácil de entender para los usuarios.
Flexibilidad: La modularidad permite cambios y actualizaciones más sencillas en el diseño.

Desventajas:

Limitaciones Creativas: La rigidez de la organización modular podría limitar la creatividad en ciertos contextos de diseño.
Complejidad: Dependiendo de la implementación, podría resultar en una interfaz visualmente compleja si no se gestiona adecuadamente.

Inspirate: https://bentogrids.com/

Diseño sin interfaz - Zero UI

💡 El diseño sin interfaz representa un cambio significativo en la forma en que interactuamos con la tecnología y presenta desafíos interesantes para los diseñadores de UX en términos de creatividad, innovación y consideraciones éticas.

¿Qué es?

El diseño sin interfaz (Zero UI) es un enfoque de diseño de experiencia de usuario (UX) que busca minimizar o eliminar la dependencia de interfaces visuales tradicionales, como pantallas y botones, centrándose en formas más naturales e intuitivas de interacción. La idea es crear experiencias en las que los usuarios puedan interactuar con la tecnología de manera fluida y natural sin la necesidad de una interfaz visual evidente.

Características:

Interacción Natural: Se centra en la creación de interacciones que imitan la comunicación humana cotidiana, como comandos de voz, gestos, movimientos corporales, etc.
Sensores y Tecnología Vestible: Utiliza sensores avanzados y dispositivos vestibles para capturar datos y permitir interacciones contextuales y sin esfuerzo.
Integración de Inteligencia Artificial (IA): Incorpora IA para comprender y anticipar las necesidades del usuario, personalizando la experiencia de acuerdo con el contexto y el comportamiento previo.
Mínima o Ninguna Pantalla: Busca reducir o eliminar la necesidad de pantallas visuales, fomentando la interacción a través de otros sentidos como el oído o el tacto.
Contextualidad: Utiliza datos contextuales para adaptarse a las necesidades del usuario en tiempo real, ofreciendo respuestas y acciones relevantes.

Desafíos:

Retroalimentación del Usuario: Al carecer de una interfaz visual, proporcionar retroalimentación efectiva al usuario puede ser un desafío. La retroalimentación auditiva y táctil se vuelve crucial.
Complejidad de Implementación: La integración de tecnologías como IA, sensores avanzados y dispositivos vestibles puede ser compleja y costosa.
Privacidad y Seguridad: La recopilación de datos contextuales para mejorar la experiencia puede plantear preocupaciones sobre la privacidad y la seguridad de la información del usuario.
Adopción del Usuario: Los usuarios pueden requerir tiempo para adaptarse a un enfoque sin interfaz visual, ya que va en contra de las convenciones tradicionales de interacción.
Limitaciones Tecnológicas: La tecnología actual puede tener limitaciones en la interpretación y respuesta a las señales no visuales, lo que puede afectar la precisión y eficacia de la interacción sin interfaz.

Voice user interface VUI

💡 A pesar de estos desafíos, los VUI han ganado popularidad y se utilizan en una variedad de aplicaciones, como asistentes virtuales, dispositivos inteligentes para el hogar, sistemas de navegación y más, mejorando la accesibilidad y proporcionando nuevas formas de interactuar con la tecnología.

¿Qué es?
Una Interfaz de Usuario por Voz (Voice User Interface o VUI) es un sistema que permite a los usuarios interactuar con dispositivos o aplicaciones utilizando comandos y respuestas de voz. En lugar de depender de la entrada táctil o visual, los usuarios pueden comunicarse con la tecnología a través de la voz, convirtiendo su habla en acciones realizables por el sistema.

Características:

Reconocimiento de Voz: La característica central es la capacidad para interpretar y entender el habla del usuario, convirtiéndola en comandos o consultas comprensibles.
Síntesis de Voz: Proporciona respuestas auditivas, convirtiendo la información en voz para que los usuarios puedan entender las respuestas del sistema.
Comandos Naturales: Los VUI están diseñados para comprender comandos y preguntas en lenguaje natural, permitiendo a los usuarios interactuar de manera más intuitiva.
Personalización: Puede adaptarse a las preferencias y patrones de habla individuales de los usuarios, ofreciendo una experiencia más personalizada con el tiempo.
Respuestas Contextuales: Puede tener la capacidad de recordar y comprender el contexto de la conversación, brindando respuestas más relevantes y útiles.
Integración con Tecnologías Emergentes: Puede integrarse con tecnologías como inteligencia artificial (IA), procesamiento de lenguaje natural (NLP) y aprendizaje automático para mejorar la precisión y la eficacia.

Desafíos:

Precisión del Reconocimiento: La precisión del reconocimiento de voz puede ser un desafío, especialmente en situaciones ruidosas o cuando se enfrenta a diversos acentos y entonaciones.
Privacidad: La utilización de VUI implica la grabación y el procesamiento de la voz del usuario, lo que plantea preocupaciones sobre la privacidad y la seguridad de los datos de voz.
Limitaciones de Contexto: Algunas situaciones pueden requerir un contexto más amplio para comprender completamente las intenciones del usuario, lo que puede ser un desafío para algunos sistemas VUI.
Aprendizaje de la Máquina: La mejora continua del rendimiento del VUI a través del aprendizaje de la máquina puede llevar tiempo y requerir grandes cantidades de datos.
Interpretación de Comandos Complejos: La interpretación de comandos complejos o de múltiples partes puede ser difícil para algunos sistemas VUI.
Experiencia del Usuario: Lograr una experiencia de usuario fluida y natural que rivalice con la interacción táctil o visual puede ser un desafío.

GlassMorphic

💡 Como con cualquier tendencia de diseño, es importante evaluar cuidadosamente la idoneidad de glassmorphism para un proyecto específico y considerar las necesidades y expectativas de los usuarios. El éxito de esta técnica dependerá de su aplicación cuidadosa y equilibrada en el contexto de diseño apropiado.

¿Qué es?

Glassmorphism es un estilo de diseño de interfaz de usuario (UI) que se ha vuelto popular y que se caracteriza por imitar la apariencia del vidrio translúcido en las interfaces digitales. Este enfoque busca crear una apariencia similar al cristal, con efectos de fondo translúcido y bordes y sombras suaves que dan la sensación de profundidad y capas en la interfaz.

Características:

Fondo Translúcido: Utiliza fondos translúcidos, a menudo con un efecto de desenfoque, para simular el vidrio.
Bordes y Sombras Suaves: Presenta bordes y sombras suaves y difuminadas para lograr una apariencia más realista.
Efecto de Profundidad: Busca crear la sensación de capas superpuestas, lo que da a la interfaz un aspecto tridimensional.
Minimalismo: A pesar de su apariencia rica en detalles, el glassmorphism a menudo se asocia con un diseño limpio y minimalista.
Uso de Colores Suaves: Se caracteriza por el uso de colores suaves y tonos pastel para complementar la apariencia del vidrio.

Ventajas:

Estética Moderna: Glassmorphism proporciona una estética moderna y atractiva que puede hacer que la interfaz se destaque.
Sensación de Profundidad: La aplicación de sombras y efectos de desenfoque contribuyen a una sensación de profundidad, lo que puede mejorar la experiencia de usuario.
Adaptabilidad: Puede adaptarse a diversos temas y contextos, desde aplicaciones móviles hasta sitios web y aplicaciones de escritorio.

Desventajas:

Posible Complejidad Visual: El uso excesivo o inapropiado de elementos glassmorphic puede resultar en una interfaz visualmente compleja y distraer la atención del contenido esencial.
Posible Impacto en el Rendimiento: La aplicación de efectos de desenfoque y sombras puede tener un impacto en el rendimiento, especialmente en dispositivos con recursos limitados.
Accesibilidad: La translucidez de los fondos puede afectar la legibilidad y la accesibilidad, especialmente para usuarios con problemas de visión.
Posible Falta de Originalidad: Debido a su popularidad, el uso excesivo de glassmorphism puede hacer que las interfaces parezcan similares y carezcan de originalidad.

Algunos poderes de Javascript

Lu — Mon, 18 May 2020 21:01:35 +0000

Next Generation of Javascript

Let y const

Cuando declaramos una variable bajo la palabra reservada var javascript entiende que:

la variable podrá ser reasignada o inicializada durante cualquier momento es decir que podemos sobre ecribirla

    var fruit = "🍉";
    function reasignName(){
        fruit = "🥝";
        console.log(fruit);
    }
    reasignName() //
    var fruit = "🍓"
    console.log(fruit) //

el escope de esta pertenece a su contexto de ejecución
que una variable declarada fuera de un bloque como una función pertenece al alcance global.

    var fruit = "🍉";
    function reasignName(){
        var fruits = [🍑,🍌,🍇,🥝,🥥]
        fruit = "🥝";
        console.log(fruit);
    }
    var fruit = "🍓"
    console.log(window.fruit); // 🍓
    console.log(window.fruits); // undefined

Nota: las variables no declaradas siempre perteneceran al contexto global y a diferencia de las variables declaradas estas podrán ser eliminadas. Antipatron

    var cat = "🐯";
    pig = "🐷";
    (function () {
        lion = "🦁";
    })()
    console.log(cat, pig, lion); //🐯 🐷 🦁

    delete cat; //false
    delete pig; //true
    delete lion; //true

    console.log(cat, pig, lion); //🐯 undefined undefined

Let introdujo un nuevo paradigma llamado "block scope" esto hace referencia a que los if, switch conditions, while loops, foor loops, o cualquier cosa que veamos con {} es un bloque. Y con let y const podremos declarar variables en el block scope, lo que significa que estás variables existen sólo en el bloque correspondiente.

Diferencias entre var y let:

las variables let podrán ser reasignadas más no re-inicializadas o sobre-escritas:

    let fruit = "🍉";
    function printMyFruit(){
        let fruit = "🥝";
        console.log(fruit);
    }
    fruit = "🍓"
    printMyFruit(); // "🥝"
    console.log(fruit) // "🍓"
    let fruit = "🍌" // Uncaught SyntaxError: Identifier 'fruit' has already been declared.

las variables let y const sólo existiran dentro del bloque de scope:

    function fruitsShow(){
        if(true){
            var fruit1 = "🍏";//exist in function scope
            const fruit2 = "🍌";//exist in block scope
            let fruit3 = "🥝";//exist in block scope
    }
        console.log(fruit1); 
        console.log(fruit2);
        console.log(fruit3);
    }

    fruitsShow();
    // 🍏
    // error: fruit2 is not defined
    // error: fruit3 is not defined

y const?, comparte las mismas caracteristicas que let pero a diferencia de esta, no podrá ser reasignada, será por consiguiente una variable de sólo lectura

    const cat = "🐱";
    cat = "🐈"; //Uncaught TypeError: Assignment to constant variable.

Arrow Functions

Las funciones flecha tienen una sintaxis diferente:

    function myFunc(){
        ....
    }

    const myFunc = () => {
        ....
    }

Resuelve cierto tipo de issues que se tenian con la palabra this:

    var object = {
        dino: "🦖",
        arrow: () => {
            console.log(this.name);
        },
        anonym: function () {
            console.log(this.name);
        }
    };
    object.arrow() //undefined
    object.anonym() //🦖

las arrow function capturan el valor del scope externo más cercano, para este ejemplo el escope mas cercano es el window por lo tanto la variable dino no existe.
las arrow function no tienen su propio this, arguments, super o new.target lo que quiere decir que este tipo de funciones no podrán ser usadas como constructores.
las funciones tradicionales definen su propio valor de this.
las arrow function no tienen sus propio this utiliza el valor del contexto de ejecución que la contiene.

Class

Es una sintaxis de azucar para lo que conociamos como prototype.

    class Person {
        ...    
    }

    function Person () {
        ...
    }

Al igual que las funciones constructoras dentro de nuestras clases tendremos un contructor.

    class Person {
        constructor(){
            this.name = name;
        }
    }

    function Person (name) {
        this.name = name;
    }

Podremos hacer todo con clases excepto modificar un prototypo ya existente o nativo. 🐒
Es el sistema de herencia de javascript esto significa que nuestras clases podrán tener metodos, nuestras clases podrán ser instanciadas y tambien podrán ser extendidas.

    class Person {
        constructor(name){
            this.name = name;
        }
        //method
        printName() {
            console.log(this.name)
        }
    }
    //instance
    var me = new Person("Lu");
    me.printName() // "Lu"

    //extends
    class Developer extends Person {
        constructor(name, lenguage){
            super(name);
            this.lenguage = lenguage;
        }
        //method
        imAdeveloper() {
            console.log(`Hi I'm ${this.name} and I'm ${this.lenguage} developer`)
        }

    }
    //instance
    var meDev = new Developer('Lu', 'js');
    meDev.imAdeveloper();

Los methodos son funciones atachadas a las classes.

Spread & Rest Operators {...}

Es una forma de recibir multiples argumentos en llamadas a funciones o multiples elementos en un array literal.

Spread en funciones

    function spread(...myArguments) {
        console.log(myArguments)
    }

    spread("🦊","🐰","🐷","🐼","🐸","🐥","🐨","🦁","🐰"); // ["🦊","🐰","🐷","🐼","🐸","🐥","🐨","🦁","🐰"]

Spread en array literales

    var insects = ["🐛","🐝","🐞"];
    var animals = ["🦊","🐰","🐷",...insects,"🐼","🐸","🐥","🐨","🦁","🐰"];
    console.log(animals); //["🦊", "🐰", "🐷", "🐛", "🐝", "🐞", "🐼", "🐸", "🐥", "🐨", "🦁", "🐰"]

Spread en objetos

    var insects = { insects: ["🐛","🐝","🐞"]};
    var object= {
        ...insects,
        animals: ["🦊","🐰","🐷","🐼","🐸","🐥","🐨","🦁","🐰"]
    }
    console.log(object); //{insects: Array(3), animals: Array(9)}

Destructuring

Este es un metodo simplificado de javascript para extraer multiples propiedades de un arreglo o un objeto, es llamado desconstrucción y usa una sintaxis similar al a de los arrys literales o objetos.

destructuring con Arreglos

    var animals = ["🦊","🐰","🐷","🐼","🐸","🐥","🐨","🦁","🐰"];
    var [animal1, animal2, animal3] = animals;
    console.log(animal1); //🦊
    console.log(animal2); //🐰
    console.log(animal3); //🐷

destructuring con Arreglos y valores por defecto;

    var animals = ["🦊","🐰"];
    var [animal1, animal2, animal3 = "🐥"] = animals;
    console.log(animal1); //🦊
    console.log(animal2); //🐰
    console.log(animal3); //🐥

destructuring con Arreglos e ignorar elementos;

    var animals = ["🦊","🐰", "🐥"];
    var [animal1, , animal3] = animals;
    console.log(animal1); //🦊
    console.log(animal3); //🐥

destructuring con Objetos

    var jungle = {
        animals: ["🦊","🐰","🐷","🐼","🐸","🐥","🐨","🦁","🐰"],
        insects: ["🐛","🐝","🐞"]
    }

    var { animals } = jungle;

    console.log(animals); //["🦊","🐰","🐷","🐼","🐸","🐥","🐨","🦁","🐰"]

Referencia.

Cuando pasamos un argumento a un funcion o asignamos un valor primitivo (null, boolean, undefined, number, string, symbol) a una variable, este proceso siempre lo hará "por valor", es decir que este tipo de elemento será copiado. Cuando nos referimos aun valor no primitivo (Object, Array, Function) javascript hace una copia de la referencia, esto quiere decir que tenemos un puntero por el cual podemos acceder al valor original

    const tree = {
        type: "apple tree 🍎";
    };

    const otherTree = tree;

    tree.type = "orange tree 🍊";

    console.log(otherTree) //"orange tree 🍊"

referencias circulares, son aquellas en las que un objecto contiene una referencia así mismo.

    const a = [1, 2, 3];
    a.push(a);
    console.log(a); //[1,2,3,[1,2,3]]

Forem: Lu

Core Web Vitals - Todo lo que necesitas saber para entenderlas

🚑 CORE WEB VITALS

💡 ¿Qué son las Web Vitals?

💡 ¿Por qué son importantes en SEO?

💡 ¿Qué métricas hacen parte de las Web Vitals?

🚥 LCP (Largest Contentful Paint o procesamiento de imagen con contenido más grande):

🚥 CLS (Cumulative layout shift o cambio de diseño acumulado).

🚥 FID *(first input delay o retraso de primera entrada):*

🚪 Métricas complementarias:

🚥 TTFB - Time to first Byte

🚥 FCP- First Contentful Paint

🚥TBT - Total Blocking Time

🚥 TTI - Time to Interacting

💡¿Cómo interpretar el reporte?

🚑 Diagnóstico detallado para 4 categorías:

🚦 Indicadores de 3 colores (tipo semáforo):

🌲 Treemap:

🗓️ Datos generales y de ambiente del test:

💡¿Cómo puedo optimizar mi página?

💡¿Cuándo preocuparme?

🖍️ Debemos preocuparnos cuando los indicadores del diagnóstico está en rojo, es decir, pobres.

🧰 Herramientas:

🧮 Calculadora Web Vitals:

🏎️ Pagespeed:

👩🏼‍💻 Google Search Console:

🛖 Lighthouse:

Otros recursos:

🔮 WIKI

💾 Recursos

Tendencias de diseño UX-UI 2024

Neumorphism

Bento:

Diseño sin interfaz - Zero UI

Voice user interface VUI

GlassMorphic

Algunos poderes de Javascript

Next Generation of Javascript

Let y const

Nota: las variables no declaradas siempre perteneceran al contexto global y a diferencia de las variables declaradas estas podrán ser eliminadas. Antipatron

Arrow Functions

Class

Spread & Rest Operators {...}

Destructuring

Referencia.

🚥 **LCP (Largest Contentful Paint o procesamiento de imagen con contenido más grande):**

🚥 **FID *(first input delay o retraso de primera entrada):***