;_; Posts - Answer Overflow

;_;

Posts Comments

KPCKevin Powell - Community

•Created by ;_; on 12/16/2023 in #front-end

How to upload website to Netlify from src

1 replies

KPCKevin Powell - Community

•Created by ;_; on 11/11/2023 in #front-end

Locate element render delay in LCP

Hello, I am new in creating websites, and launched PageInsights after finishing a project and the performance isn't very good on mobile devies. Also it sometimes show 91 performance, sometimes 67 and now it's stable 79. How can I improve the LCP and FCP? I was spectating Coverage, Network and Performance tabs, but I don't know what's causing the render delay. I tried doing critical CSS, Image CDN, compressing the images size (the hero background is 37.69 KB in full size so it shouldn't take too much to download it), adding the lazy loading, but nothing seems to be working. PageInsights shows that hero section is loading for about 5s, but I don't really know why. Thanks for response. EDIT. I was thinking about downloading the material icons and montserrat font from Google, but I couldn't find anything about improving the performance or whether I would host fonts locally is better than importing them directly from Google Fonts github: https://github.com/Jakub-Gryczka/pomoc_drogowa live: https://jakub-gryczka.github.io/pomoc_drogowa/

34 replies

KPCKevin Powell - Community

•Created by ;_; on 11/10/2023 in #front-end

Website looks different in responsive mode than in real device

5 replies

KPCKevin Powell - Community

•Created by ;_; on 8/22/2023 in #front-end

Why function does work different?

Hi, I coded a function that counts from 0 to the value provided by HTML. I also have function that starts the counter when the user scrolls to the section ".advantages". When I call the function "counter()" independently it works fine, but when I call it inside another function, the counting process becomes much faster and I can't prevent that. Can someone explain why does that happen? The commented "counter()" works fine, the "counter()" in the event listener doesn't work how I want it to.

  const number = document.querySelectorAll(".number");
  const advantages = document.querySelector('.advantages');
  const speed = 100;
  function counter() {
    number.forEach(element => {
      incNumber(element);
    });
    function incNumber(elem) {
      let text = +elem.innerText;
      const value = +elem.getAttribute("data-count");
      const inc = Math.ceil(value / speed);
      if(text < value) {
        elem.innerText = inc + text;
        setTimeout(() => {
          incNumber(elem);
        }, 20);
      } else {
        elem.style.marginLeft = "0.5em";
        elem.innerText = value;
      }
    }
}

// counter();


  function isInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)

    );
}


document.addEventListener('scroll', function () {
    if(isInViewport(advantages)) {
      counter();
    }

}, {
    passive: true
});

  const number = document.querySelectorAll(".number");
  const advantages = document.querySelector('.advantages');
  const speed = 100;
  function counter() {
    number.forEach(element => {
      incNumber(element);
    });
    function incNumber(elem) {
      let text = +elem.innerText;
      const value = +elem.getAttribute("data-count");
      const inc = Math.ceil(value / speed);
      if(text < value) {
        elem.innerText = inc + text;
        setTimeout(() => {
          incNumber(elem);
        }, 20);
      } else {
        elem.style.marginLeft = "0.5em";
        elem.innerText = value;
      }
    }
}

// counter();


  function isInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)

    );
}


document.addEventListener('scroll', function () {
    if(isInViewport(advantages)) {
      counter();
    }

}, {
    passive: true
});

4 replies

Gaming

Programming