Phuoc Nguyen articles - 113 total
Lazy load a Google Map
Google Maps is a powerful tool to add interactive maps to your website. However, embedding a Google...
Lazy load a video
Lazy loading is an awesome technique that delays the loading of non-essential resources, such as...
Lazy load an iframe
In our previous posts, we learned how to use the Intersection Observer API to lazy load images and...
Lazy load a background image
There are times when using a background image is a better option than using an img tag. For instance,...
Lazy load an image
Lazy loading images is a smart way to improve website performance. It's a technique that defers the...
Create a reusable component for IntersectionObserver
In our previous post, we learned how to create a custom hook that simplifies the IntersectionObserver...
Create a reusable hook for IntersectionObserver
In our previous post, we learned how to use the useEffect hook to integrate IntersectionObserver with...
Use the IntersectionObserver API in React
In our previous post, we covered the basics of the IntersectionObserver API, including its syntax and...
An introduction to the IntersectionObserver API
In our previous post, we discussed a few ways to check if an element is visible. We checked if it was...
Check if an element is visible in the viewport
Knowing how to check if an element is visible in the viewport is incredibly useful in web...
Practical examples of using IntersectionObserver with React
Are you tired of endlessly scrolling through content only to find that the images and videos you...
Clipboard API fallback
In our previous post, we learned how to use feature detection to check if the Clipboard API is...
Check if the Clipboard API is supported
If you're creating a web application that relies on the Clipboard API, it's crucial to determine...
How to read and write data to the clipboard
In modern web development, having a website or application that can interact with the user's system...
Align items in a grid
Here's what we'll cover: Learn how to vertically align items using the align-self property ...
Center align the main content and left align the sidebar
Here's what we'll cover: Define specific areas within a grid using the grid-template-areas...
Display grid items in the same area
Here's what we'll cover: Discover how to layer grid items using the grid-area property. In...
Create a holy grail layout
Here's what we'll cover: Learn how to use negative numbers with the grid-column property. Use...
Create a vertical timeline
Here's what we'll cover: Discover how to position an item precisely using the grid-column...
Create an event calendar
Here's what we'll cover: Learn how to define the number and size of columns and rows using the...
Create a Gantt chart
Here's what we'll cover: Learn how to create a grid with cells of varying widths using the...
Create a macOS calculator layout
Here's what we'll cover: Learn how to adjust the placement of a grid item using the grid-column...
Remove empty cells from the calendar
In our previous post, we learned how to use CSS grid to create a calendar. Now, let's take a closer...
Position items in a grid
Here's what we'll cover: Learn how to use the grid-row-start and grid-row-end properties ...
Build a calendar
Here's what we'll cover: How to use the repeat function to create equal widths within a grid...
Create a sticky footer
Here's what we'll cover: How to use the display: grid declaration to create a grid How to...
Create a split-screen layout
Here's what we'll cover: How to use the display: grid declaration to create a grid How to...
Create a horizontal divider with centered text
Here's what we'll cover: How to create a grid using the display: grid declaration How to define...
Discover how to use CSS grid layout with real-life examples
CSS grid is an incredibly versatile tool that can help you create stunning and responsive web...
Build a REST client
A REST client is an application that lets you interact with RESTful web services. It acts as a...