Search for a command to run...
As a Senior Principal Engineer at CVSHealth, I specialize in building and optimizing cvs.com to deliver a superior guest experience. Using the latest web technologies, my team and I work diligently to create a user-friendly and intuitive platform that exceeds expectations.
No comments yet. Be the first to comment.
Use the following script to download videos from YouTube using yt-dlp. Incorporating cookies-from-browser can assist in downloading videos that are behind a paywall, provided you have already paid for that content. Please ensure you adhere to the con...
I ran into an issue recently where my autocomplete suggestions on VSCode would only bring up Emmet suggestions and none of the type information would be suggested in autocomplete. After digging through VSCode settings for a bit, figured out that you ...
I recently set up an Nx monorepo with a lot of sensible defaults. My linting config was working perfect in CI. Running ESLint on terminal through Nx would work fine as well but I was not seeing any ESLint issues on my VSCode editor. On digging deeper...
Intro Setting up a NextJS project is exciting, but securing the localhost environment for testing and development can be challenging. To enable a common usecase of accessing cookies from the production domain (e.g., example.com) while working locally...
This will be a running list of things that I found useful while working on enterprise projects. These can be good tips for other projects too but since there are usually a lot of developers working across enterprise codebases, it is a good idea to es...
Loading images on the web has always been a hot topic. If a user doesn’t see all your images, it doesn’t make sense to send down the wire all those extra bytes. All the techniques used to lazy load images in the past have used a combination of the browser provided APIs like getBoundingClientReact together with event listeners on each image to get the position of the element with respect to the viewport.
The problem with these approaches is the computations involved in the API is heavy and often results in users experiencing scroll janks navigating the site. With IntersectionObserver, all this would hopefully go away!
IntersectionObserver is an API baked right into your browser to help you combat the problem above.
Check out the following Codepen for a demo on Intersection observer to lazy load images on a site:
The IntersectionObserver API accepts 2 arguments, a callback function and an options object. Checkout the MDN link to see the values for each of these options. Below is a brief one liner for what each options does.
root - The parent element with respect to which the intersection will be calculated. Defaults to null which means, the viewport.
rootMargin - Values specified here will add margin to the root element (specified by root) on all 4 sides.
threshold - Specifies what percentage of the target element (the element being observed) crosses the intersection for the callback to be fired.
Instead of having an event listener on each and every image, we could have implemented this by having a placeholder ‘div’ in between a set of say, 10 images to load 10 images at once. We could then observe this placeholder instead to minimize the observers on our page and load images (in sets of 10) more effectively.
This would be great for a shopping site where you have a infinite scroll for images.
For those interested to explore more, here is a great article by Surma and Robert Flack on optimizing infinite scrolling:
https://developers.google.com/web/updates/2016/07/infinite-scroller
Intersection Observers are great and here to stay. You could feature detect the availability and go through loading all the images or lazy loading for your users. Check the following link for the available browser support.
https://caniuse.com/#search=intersectionobserver