Real Life Coding Stuff

For smart Primates & ROBOTS (oh and ALIENS ).

Saturday, February 15, 2025

Core Web Vitals Assessment showing LCP 10.6s while google pagespeed report showing LCP 3.5s why?

, , No comments

Core Web Vitals Assessment showing LCP 10.6s while google pagespeed report showing LCP 3.5s why?

 

Core Web Vitals Assessment showing LCP 10.6s while google pagespeed report showing LCP 3.5s why?

So, you can face this situation while testing your website's any page speed performance score for mobile and desktop.
You can see the similar test result on Google PageSpeed Insights.
The header heading Core web Vitals Assessment LCP is 10.6 seconds but the bottom report shows LCP 3.5 seconds.
The difference between Core Web Vitals (LCP) and Google PageSpeed reports (LCP) depends on many factors. here are some of them:

The Core Web Vitals:

The Core Web Vitals metrics score represents the real actual user's experience.
It also depends on users' conditions, device, location and network conditions.
So the LCP is showing different users.

The Google PageSpeed Insights:

Actually it generates metrics tests from a self defined environment.
So it does not get the data of real world end users for ex: device hardware, poor device network, what software extension installed in device or network speeds. It is also same for other metrics for ex: First Contentful Paint (FCP), Time to First Byte (TTFB), Cumulative Layout Shift (CLS) and Interaction to Next Paint (INP)

Hope you understand.

If you need any other explanation or help just comment.

 

Share:
Fore more, continue here...

Friday, January 17, 2025

Image Zoom Hover Effect

, , No comments

Image Zoom Hover Effect

Animations are good and it make website's pages attractive and more live. It feel user to see live things. Here you can user videos etc or gif image, But the problem is after using videos or gif file your website's page will heavy and load slow. These heavy file will consume your hosting spaces and also consume user's data and bandwidth. 

So in this case we can use animations to make some zoom-in and zoom-out effect to JPG and PNG file. Using this we can save data and bandwidth. We will do it with simple CSS. Here we are not using any JavaScript, which can make it complex. below are 2 images. 1st one is normal image, and when your mouse hover then it will zoom. see 2nd image.

Here is the below code action for image zoom-in zoom-out:

Image Zoom Hover in Effect, Image Zoom Hover out Effect
                                                    1st Image zoom hover out effect

 

Image zoom hover in effect
                                                        2nd Image zoom hover in effect

 

 

 

Here is the below code for image zoom-in zoom-out:

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Zoom Hover Effect</title>
  <style>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4;
}

section {
  text-align: center;
}

.image-container {
  position: relative;
  overflow: hidden; 

  display: inline-block;
  width: 100%;
  max-width: 500px;
 border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);}

.image-container img {
  display: block;
   border: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  transform: scale(1.1); /* Default size */  /* IMPORTANT PART */
  transition: transform 9.5s ease-in-out; /* Smooth transition for zoom effect */
}


.image-container:hover img {
  transform: scale(2); /* Zoom in */ /* IMPORTANT PART */
}

  </style>
</head>
<body>
  <!-- Container for the Zoom Effect -->
  <section>
    <h2>Image Zoom Hover Effect</h2>
    <div class="image-container">
      <img src="1.jpg" alt="Zoom Effect Image">
    </div>
  </section>
</body>
</html>

 

Share:
Fore more, continue here...

Tuesday, December 03, 2024

How to make center align child div

No comments

 How to make center align child div?

 

Suppose you have 2 Div tag. And want the make inner tag center

<div id="d1">

    <div id="d2">

 

     </div>

  </div>

 

Then you will use below 1 line css code as below:

style="margin: 0 auto;" 


<div id="d1">

    <div id="d2" style="margin: 0 auto;" >

 

     </div>

  </div>

Share:
Fore more, continue here...

Change section tag's background image at runtime

No comments

Change section tag's background image at runtime

 

Change <section> tag's background image at runtime. we assume that <section> tag's "back-img-url" attribute have the image link.

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Change <section> tag's background image at runtime. we assume that <section> tag's "back-img-url" attribute have the image link. </title>
</head>
<body>
Change <section> tag's background image at runtime. we assume that <section> tag's "back-img-url" attribute have the image link.
<section id="sec" class="image_main-banner-class module-container image-full-width-img text-text good-style    fullimg-width-background    "
back-img-url="IMAGE-URL">
Test Test Test<br/>Test Test Test<br/>Test Test Test<br/>Test Test Test<br/>Test Test Test<br/>Test Test Test<br/>Test Test Test<br/>
</section>
<script>
try {
    let sec = document.getElementsByClassName("image_main-banner-class module-container image-full-width-img text-text good-style    fullimg-width-background    ");
    let img=sec[0].getAttribute("back-img-url");
    sec[0].style.backgroundImage = "url('"+img+"')";
} catch (err) { console.log(err); }   

let tttt=0
if (window.screen.width < 500) {
tttt=5000;
} else {
tttt=2500;
}
</script>
</body>
</html>

 

 

 

 

Share:
Fore more, continue here...

content visibility example

No comments

Content Visibility Example

 

 

 <!doctype html>
<html lang="en-au">
<head>
    <meta charset="utf-8">
    <title>Homepage</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.story {  content-visibility: auto;  contain-intrinsic-size: auto 1300px;}
body {  font-size: 18px;  background: #fdfbfb;  padding: 0 2rem;  font-family: sans-serif;  box-sizing: border-box;  line-height: 1.4;}
article {  margin: 0 auto;  max-width: 960px;}
article p:first-of-type {  font-size: 1.2rem;}
blockquote {  padding: 2rem;  border: 3px dashed rebeccapurple;}
h1 {  text-align: center;  font-size: 2.75rem;}
a {  color: inherit;  font-weight: bolder;}
ul {  list-style: none;}
nav {  display: flex;  justify-content: space-between;  align-items: center;}
nav ul {  list-style: none;}
figure {  width: 100%;  margin: 0;}
img {  width: 100%;  max-width: 100%;}
ul {  list-style: circle;}
.grid-2 {  display: grid;  grid-template-columns: repeat(2, 1fr);  gap: 1rem;  margin-top: 1rem;  margin-bottom: 1rem;}
figcaption {  font-size: 80%;  background: rebeccapurple;  color: white;  text-align: center;  padding: 1rem;  margin: -1rem auto 1rem;  z-index: 1;  position: relative;  width: 80%;  max-width: 400px;}
</style>
</head>
<body>
<article>
  <h1>The Art of Bug Debugging</h1>

  <figure>
    <img src="https://picsum.photos/960/550" alt="" />
  </figure>

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quo
    accusantium corrupti magnam, rem non ad dignissimos alias! Voluptas
    molestias expedita pariatur temporibus adipisci ab quaerat fugiat
    quisquam aliquid ad!
  </p>

  <blockquote>
    Saepe illum rerum quasi sed cum vel, esse iusto fugiat enim aperiam
    voluptate qui eius maxime quo eum dicta. Incidunt, nostrum perferendis.
  </blockquote>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius
    consequuntur nulla adipisci ratione velit perspiciatis repellat ipsa
    tempore earum hic corporis, provident reprehenderit maiores commodi qui
    rerum nisi animi quaerat! Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Obcaecati voluptatem officia qui blanditiis et
    laudantium, corrupti fuga fugit? Saepe eius sit totam ipsam nesciunt
    debitis amet at quos doloribus porro.
  </p>

  <figure>
    <img src="https://picsum.photos/960/550?random=2" alt="" />
    <figcaption>
      <a href="#">Lorem ipsum</a> dolor sit amet consectetur, adipisicing
      elit. Doloremque, praesentium.
    </figcaption>
  </figure>

  <h2>How to inspect the issue</h2>
  <div class="story">
    <blockquote>
      Saepe illum rerum quasi sed cum vel, esse iusto fugiat enim aperiam
      voluptate qui eius maxime quo eum dicta. Incidunt, nostrum perferendis.
    </blockquote>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
      officiis omnis, maiores corporis, commodi temporibus necessitatibus
      minus quae et eum repudiandae sequi voluptates magnam consequuntur
    </p>

    <div class="grid-2">
      <figure>
        <img src="https://picsum.photos/475?random=1" alt="" />
      </figure>
      <figure>
        <img src="https://picsum.photos/475?random=2" alt="" />
      </figure>
    </div>

    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos, vitae,
      odit pariatur mollitia facere quo debitis libero optio obcaecati
      exercitationem voluptas, beatae fugiat! Optio voluptates at harum eum
      ad molestiae. Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Blanditiis, accusamus nulla? Delectus atque rerum vitae nostrum.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto illum
      odio eos dolorum molestias expedita optio cum fugiat illo sequi
      veritatis iure alias dolor corrupti eum tempora explicabo, minus quam!
    </p>

    <ul>
      <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
      <li>
        Soluta nisi culpa nemo praesentium explicabo itaque aliquam tenetur
        quae saepe harum, incidunt consequatur libero?
      </li>
      <li>Nemo saepe doloremque enim praesentium provident officiis!</li>
    </ul>

    <p>
      Numquam animi repellat exercitationem illo, ipsa facilis dolore quo
      sunt cupiditate voluptatum dolorem, asperiores provident porro
      excepturi temporibus repellendus iure laboriosam vero
    </p>

    <div class="grid-2">
      <figure>
        <img src="https://picsum.photos/475?random=4" alt="" />
        <figcaption>
          Ipsum veniam saepe atque maxime incidunt hic reprehenderit
          consectetur vero.
        </figcaption>
      </figure>
      <figure>
        <img src="https://picsum.photos/475?random=5" alt="" />
        <figcaption>
          Facilis nesciunt perferendis porro asperiores provident.
        </figcaption>
      </figure>
    </div>

    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum
      aliquid natus numquam rerum omnis obcaecati, explicabo quibusdam
      assumenda dolorem ut iure modi quod voluptates cum eveniet consectetur
      aperiam distinctio nisi.
    </p>
  </div>

  <h2>Don't ask your colleagues for help</h2>
  <div class="story">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
      officiis omnis, maiores corporis, commodi temporibus necessitatibus
      minus quae et eum repudiandae sequi voluptates magnam consequuntur
    </p>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, debitis
      consequatur beatae veritatis distinctio molestiae nemo! Velit labore
      et officiis distinctio. Molestiae minima perspiciatis magni mollitia
      dolore. Rem, in consectetur.
    </p>

    <blockquote>
      Saepe illum rerum quasi sed cum vel, esse iusto fugiat enim aperiam
      voluptate qui eius maxime quo eum dicta. Incidunt, nostrum perferendis.
    </blockquote>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto illum
      odio eos dolorum molestias expedita optio cum fugiat illo sequi
      veritatis iure alias dolor corrupti eum tempora explicabo, minus quam!
    </p>

    <ul>
      <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
      <li>
        Soluta nisi culpa nemo praesentium explicabo itaque aliquam tenetur
        quae saepe harum, incidunt consequatur libero?
      </li>
      <li>Nemo saepe doloremque enim praesentium provident officiis!</li>
    </ul>

    <p>
      Numquam animi repellat exercitationem illo, ipsa facilis dolore quo
      sunt cupiditate voluptatum dolorem, asperiores provident porro
      excepturi temporibus repellendus iure laboriosam vero
    </p>

    <div class="grid-2">
      <figure>
        <img src="https://picsum.photos/475?random=6" alt="" />
        <figcaption>
          Ipsum veniam saepe atque maxime incidunt hic reprehenderit
          consectetur vero.
        </figcaption>
      </figure>
      <figure>
        <img src="https://picsum.photos/475?random=7" alt="" />
        <figcaption>
          Facilis nesciunt perferendis porro asperiores provident.
        </figcaption>
      </figure>
    </div>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse ipsam
      voluptas explicabo optio ullam molestias eaque dicta reiciendis
      similique commodi possimus nostrum fugit id illo et, consequatur omnis
      labore quasi!
    </p>
  </div>

  <h2>Improve your performance by making som coffee</h2>
  <div class="story">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
      officiis omnis, maiores corporis, commodi temporibus necessitatibus
      minus quae et eum repudiandae sequi voluptates magnam consequuntur
    </p>

    <ul>
      <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
      <li>
        Soluta nisi culpa nemo praesentium explicabo itaque aliquam tenetur
        quae saepe harum, incidunt consequatur libero?
      </li>
      <li>Nemo saepe doloremque enim praesentium provident officiis!</li>
    </ul>

    <blockquote>
      Saepe illum rerum quasi sed cum vel, esse iusto fugiat enim aperiam
      voluptate qui eius maxime quo eum dicta. Incidunt, nostrum perferendis.
    </blockquote>

    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos, vitae,
      odit pariatur mollitia facere quo debitis libero optio obcaecati
      exercitationem voluptas, beatae fugiat! Optio voluptates at harum eum
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto illum
      odio eos dolorum molestias expedita optio cum fugiat illo sequi
      veritatis iure alias dolor corrupti eum tempora explicabo, minus quam!
    </p>

    <p>
      Numquam animi repellat exercitationem illo, ipsa facilis dolore quo
      sunt cupiditate voluptatum dolorem, asperiores provident porro
      excepturi temporibus repellendus iure laboriosam vero
    </p>

    <div class="grid-2">
      <figure>
        <img src="https://picsum.photos/475?random=8" alt="" />
        <figcaption>
          Ipsum veniam saepe atque maxime incidunt hic reprehenderit
          consectetur vero.
        </figcaption>
      </figure>
      <figure>
        <img src="https://picsum.photos/475?random=9" alt="" />
        <figcaption>
          Facilis nesciunt perferendis porro asperiores provident.
        </figcaption>
      </figure>
    </div>

    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum
      aliquid natus numquam rerum omnis obcaecati, explicabo quibusdam
      assumenda dolorem ut iure modi quod voluptates cum eveniet consectetur
      aperiam distinctio nisi.
    </p>
  </div>

  <h2>Don't forget to deploy to production on Friday!</h2>
  <div class="story">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
      officiis omnis, maiores corporis, commodi temporibus necessitatibus
      minus quae et eum repudiandae sequi voluptates magnam consequuntur
    </p>
    <div class="grid-2">
      <figure>
        <img src="https://picsum.photos/475?random=2" alt="" />
      </figure>
      <figure>
        <img src="https://picsum.photos/475?random=3" alt="" />
      </figure>
    </div>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto illum
      odio eos dolorum molestias expedita optio cum fugiat illo sequi
      veritatis iure alias dolor corrupti eum tempora explicabo, minus quam!

    </p>

    <blockquote>
      Saepe illum rerum quasi sed cum vel, esse iusto fugiat enim aperiam
      voluptate qui eius maxime quo eum dicta. Incidunt, nostrum perferendis.
    </blockquote>

    <p>
      Numquam animi repellat exercitationem illo, ipsa facilis dolore quo
      sunt cupiditate voluptatum dolorem, asperiores provident porro
      excepturi temporibus repellendus iure laboriosam vero
    </p>

    <div class="grid-2">
      <figure>
        <img src="https://picsum.photos/475?random=4" alt="" />
        <figcaption>
          Ipsum veniam saepe atque maxime incidunt hic reprehenderit
          consectetur vero.
        </figcaption>
      </figure>
      <figure>
        <img src="https://picsum.photos/475?random=5" alt="" />
        <figcaption>
          Facilis nesciunt perferendis porro asperiores provident.
        </figcaption>
      </figure>
    </div>

    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum
    </p>
  </div>

</article>
</body>
</html>

 

 

 

 

 

 

Share:
Fore more, continue here...

Saturday, November 30, 2024

Lazy load iframe video using IntersectionObserver

, , No comments

Lazy load iframe video using IntersectionObserver

 Here is the below code that will load the iframe video when it iframe will be in the viewport.
It is important that to fill the page i have used image tag with width and height.
You can use your own data.


 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lazy load iframe video using IntersectionObserver</title>
</head>
<body>
    <br/><img width="500" height="500" src="https://imgd.aeplcdn.com/1056x594/n/cw/ec/185315/jupiter-right-side-view-16.jpeg?isig=0&q=80" alt="Sample Image">
    <br/><img width="500" height="500" src="https://imgd.aeplcdn.com/1056x594/n/cw/ec/185315/jupiter-right-side-view-16.jpeg?isig=0&q=80" alt="Sample Image">
    <br/><img width="500" height="500" src="https://imgd.aeplcdn.com/1056x594/n/cw/ec/185315/jupiter-right-side-view-16.jpeg?isig=0&q=80" alt="Sample Image">
    <br/><img width="500" height="500" src="https://imgd.aeplcdn.com/1056x594/n/cw/ec/185315/jupiter-right-side-view-16.jpeg?isig=0&q=80" alt="Sample Image">
    <br/><img width="500" height="500" src="https://imgd.aeplcdn.com/1056x594/n/cw/ec/185315/jupiter-right-side-view-16.jpeg?isig=0&q=80" alt="Sample Image">
    
  <iframe allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin" title="Title" url-src="PUT-YOUYUBE-VIDEO-LINK-HERE"
  id="widget2" data-gtm-yt-inspected-5="true" width="640" height="360" frameborder="0"></iframe>

  <script>
  const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const iframe = entry.target;
      //iframe.src = iframe.dataset.src; // Assume if you use data-src for youtube link
      iframe.src=iframe.getAttribute('url-src');
      observer.unobserve(iframe);
    }
  });
});
const iframes = document.querySelectorAll('iframe[url-src]');
iframes.forEach(iframe => {
  observer.observe(iframe);
});
</script>
</body>
</html>

 

 

 

 

 

 

 

Share:
Fore more, continue here...

Auto execute code in javascript

, No comments

How to write auto execute javascript code ?


We can achieve it by 2 method.

1- Standard auto execute function.

2- Arrow function.


Standard auto execute function.


<script>
(function() {
  const iamvar1= 'Iam var 1';
  console.log('Auto Execute 1 function');
})();
</script>


Arrow function.

<script>
(()=> {
  const iamvar2= 'Iam var 2';
  console.log('Auto Execute 2 function');
})();

</script>

Share:
Fore more, continue here...

Passing value in Shopify snippets and use it

, No comments

Passing value in Shopify snippets and use it

You are working on Shopify project with a snippet. In that snippet you want pass value as per your need. So how can you achieve it ?

Let assume that you will use a snippet "rimg-a.liquid" in other liquid file and want to use as below. You want to pass imgurl, class and fetch value.

================================================

content of any liquid file or theme.liquid file in where you want to use rimg-a.liquid snippet file

include 'rimg-a',
        imgurl: 'URl-IMAGE',
        class: 'feature-mobile',
        fetch: 'yes'

================================================

content of rimg-a.liquid file

  <img  {% if fetch != blank %} fetchpriority="high" decoding="async" {% endif %} 
    {% if imgurl != blank %}
        src="{{ imgurl | split:'?' | first | replace: '2078x2233','390x419' }}"
    {% endif %}
    {% if class != blank %}class="{{ class }}"{% endif %}
  >

 

 

 

 

 

Share:
Fore more, continue here...

Change video tag source url using javascript

, No comments

Change video tag source url using Javascript


You want change <video> tag's <source></source> src when click on button in HTML and Javascript.
Here is the code with example



<video autoplay="autoplay" control="false" id="howto" loop="loop" muted="muted" playsinline="playsinline" poster="POSTER IMAGE URL" preload="metadata">
  <source asrc="MP4 URL" id="howtosource" type="video/mp4"></source>
  <img src="PSTER IMAGE URL" />
</video>

<a class="button" href="#" onclick="dook();">▷ Play Video Now</a>
 
<script>
  const dook = () => {
    const howto = document.getElementById("howto");
    const howtosource = document.getElementById("howtosource");
    const newSource = howtosource.getAttribute("asrc");
    howtosource.setAttribute("src", newSource); h
    owto.load();
    howto.play();
  };
</script>  
Share:
Fore more, continue here...

Saturday, August 31, 2024

Unable to resolve Try checking the for validity Google Pagespeed Insights

, No comments

Unable to resolve <website url> Try checking the for validity Google Pagespeed Insights

 

Unable to resolve Try checking the for validity Google Pagespeed Insights

You have a website and want to test it's pagespeed performance score at Google Pagespeed Insights test tool. You simply enter the website link and click on analysis to show the speed score result. But after few second you see the error "Unable to resolve <website url> Try checking the for validity Google Pagespeed Insights". You wondering and doubt that is really the website URL existing or not? So for cross checking you enter the website link in browser and see the website is loading.

So now the question is why Google Pagespeed Insight show "Unable to resolve <website url> Try checking the for validity Google Pagespeed Insights" error in result even website is existing?

It is due to too much slow your website. There are some timeout limit in Google Pagespeed test. if your website fetch in that limits time then speed score show else the error "Unable to resolve <website url> Try checking the for validity Google Pagespeed Insights" will show.

So to overcome this problem you need to increase your website speed, so Google Pagespeed Insights able to fetch it and show speed score result.


Share:
Fore more, continue here...

Featured Post

Core Web Vitals Assessment showing LCP 10.6s while google pagespeed report showing LCP 3.5s why?

Core Web Vitals Assessment showing LCP 10.6s while google pagespeed report showing LCP 3.5s why?   So, you can face this situation while t...

Ads Inside Post

Powered by Blogger.

Arsip