Test gist for hashtag-labs.com

Question 1: Suppose you have a webpage that contains the following IMG tag.

<img id=”myimage” src=”https://hashtag-labs.com/banner.jpeg” width=”300” height=”250” />

You can assume that any other HTML on this webpage is unknown, but valid.

Write a short script that does the following:

Every 2 seconds
If 100% of the image’s pixels are inside the browser viewport
- Write “viewable” to the console
Otherwise
- Write “non-viewable” to the console

There are too many ways to solve this task to describe them all in 10 minutes, so I'll put here only couple of them:

Use Intersection Observer

Support of this API is good enough + it's not so complicated as proxy so we can use polyfill if we need.

https://jsbin.com/wuyifumeno/edit?html,console,output

<!doctype html>
<html>
  <head>
    <style>
      .headline {
        text-align: center;
      }
      .quote {
        padding: 1rem;
        height: 120vh;
        width: 200vw;
      }
      .placeholder {
        margin: 2rem;
      }
    </style>
  </head>
  <body>
    <h1 class="headline">Test page for [email protected]</h1>
    <div class="quote">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="placeholder">
      <img id="myimage" src="https://hashtag-labs.com/banner.jpeg" width="300" height="250" />
    </div>
    <div class="quote">
      Egestas diam in arcu cursus euismod quis viverra nibh cras. Eget nullam non nisi est sit amet facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Aliquam ultrices sagittis orci a. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae. Pulvinar elementum integer enim neque volutpat ac tincidunt. Sed viverra tellus in hac. Dignissim sodales ut eu sem. Nec ullamcorper sit amet risus nullam eget. Leo in vitae turpis massa. Ut eu sem integer vitae justo eget magna fermentum iaculis. Orci sagittis eu volutpat odio facilisis mauris sit amet massa.
    </div>
    <script>
      let isInViewport = false;
      
      const target = document.getElementById('myimage');
      
      const observer = new IntersectionObserver(([entry]) => {
        isInViewport = entry.isIntersecting
      }, {
        threshold: 1.0
      });

      observer.observe(target);

      setInterval(() => {
        console.log(isInViewport ? 'viewable' : 'non-viewable')
      }, 2000)
    </script>
  </body>
</html>

Of cource there is lot of if like is image loaded / failed, is image height more than browser's viewport, is this image are not available in html on page load and inserted dynamicaly, setInterval vs requestAnimationFrame, etc. But I think all these are out of 10 minutes task, so I'll be happy to talk about such pitfalls during interview.

More oldschool

https://jsbin.com/pewoqihobu/edit?html,console,output

<!doctype html>
<html>
  <head>
    <style>
      .headline {
        text-align: center;
      }
      .quote {
        padding: 1rem;
        height: 120vh;
        width: 200vw;
      }
      .placeholder {
        margin: 2rem;
      }
    </style>
  </head>
  <body>
    <h1 class="headline">Test page for [email protected]</h1>
    <div class="quote">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="placeholder">
      <img id="myimage" src="https://hashtag-labs.com/banner.jpeg" width="300" height="250" />
    </div>
    <div class="quote">
      Egestas diam in arcu cursus euismod quis viverra nibh cras. Eget nullam non nisi est sit amet facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Aliquam ultrices sagittis orci a. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae. Pulvinar elementum integer enim neque volutpat ac tincidunt. Sed viverra tellus in hac. Dignissim sodales ut eu sem. Nec ullamcorper sit amet risus nullam eget. Leo in vitae turpis massa. Ut eu sem integer vitae justo eget magna fermentum iaculis. Orci sagittis eu volutpat odio facilisis mauris sit amet massa.
    </div>
    <script>      
      const target = document.getElementById('myimage');      

      setInterval(() => {
        const {width, height, x, y} = target.getBoundingClientRect()
        
        if (
          x > 0 
          && x + width < window.innerWidth
          && y > 0
          && y + height < window.innerHeight
        ) {
          console.log('viewable')
        } else {
          console.log('non-viewable')
        }
      }, 2000)
    </script>
  </body>
</html>

followyouhome/index.md

Use Intersection Observer

More oldschool